首先放一个源代码效果贴图 如下所示（文字部分打入马赛克）：
第一步：插入meta标签，也就是bootstrap响应式经常用到的作用于手机端的meta标签，代码如下所示：
1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 2 <meta name="viewport" content="width=device-width, initial-scale=1.0">
第二步：引入文件所需的css样式代码，如下所示（第1行和第2行代码务必引入，这是设置响应式bootstrap图标库和字体用的，第3行那就是bootsnav本身所自带的插件样式）：
bootsnav.css从百度搜索方可下载，或者点击链接https://download.csdn.net/download/tets_java/10018188?web=web进行下载。
1 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"> 2 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> 3 <link rel="stylesheet" type="text/css" href="css/bootsnav.css">
第三步：在body里边写入html代码，代码部分如下所示：
HTML代码如下所示：
1 <div class="demo" style="padding: 2em 0;"> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-md-2 col-xs-6 logo"><a href="index.html"><img src="images/LOGO.png" /></a></div> 5 <ul class="col-md-10 nva-list clearfix mhide"> 6 <li class="active"><a href="index.html">首页</a></li> 7 <li class="dropdown"> 8 <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">关于中融</a> 9 <ul class="dropdown-menu"> 10 <li><a href="html/about_zr.html">企业文化</a></li> 14 </ul> 15 </li> 16 <li class="dropdown"> 17 <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">项目简介</a> 18 <ul class="dropdown-menu"> 19 <li><a href="html/hjy_project.html">红军源</a></li> 22 </ul> 23 </li> 24 <li class="dropdown"> 25 <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">新闻动态</a> 26 <ul class="dropdown-menu"> 27 <li><a href="html/news_infor.html">新闻资讯</a></li> 28 <li><a href="html/City_news.html">社会新闻</a></li> 29 </ul> 30 </li> 31 <li><a href="html/public_activities.html">公益活动</a></li> 32 <li><a href="html/about_me.html">关于我们</a></li> 33 <li><img src="images/tel.png"><span>000-000-000</span></li> 34 </ul> 35 <div class="mshow m col-xs-6 text-right"> 36 <i class="fa fa-bars minimune muneopen"></i> 37 <i class="fa fa-times minimune muneclose"></i> 38 </div> 39 </div> 40 </div>
第四步：写入行内样式css代码如下所示：
CSS代码：
1 <style type="text/css"> 2 body{ background-color:hsla(0,0%,18%,1.00)} 3 .jq22-header h1{ text-align:center; font-size:28px; color:#939393} 4 .navbar-brand{ 5 padding: 29px 15px; 6 height: auto; 7 } 8 nav.navbar.bootsnav{ 9 border: none; 10 margin-bottom: 150px; 11 } 12 .navbar-nav{ 13 float: left; 14 } 15 nav.navbar.bootsnav ul.nav > li > a{ 16 color: #474747; 17 text-transform: uppercase; 18 padding: 30px; 19 } 20 nav.navbar.bootsnav ul.nav > li:hover{ 21 background: #f4f4f4; 22 } 23 .nav > li:after{ 24 content: ""; 25 width: 0; 26 height: 5px; 27 background: #34c9dd; 28 position: absolute; 29 bottom: 0; 30 left: 0; 31 transition: all 0.5s ease 0s; 32 } 33 .nav > li:hover:after{ 34 width: 100%; 35 } 36 nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{ 37 content: "+"; 38 font-family: 'FontAwesome'; 39 font-size: 16px; 40 font-weight: 500; 41 position: absolute; 42 top: 35%; 43 right: 10%; 44 transition: all 0.4s ease 0s; 45 } 46 nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ 47 content: "\f105"; 48 transform: rotate(90deg); 49 } 50 .dropdown-menu.multi-dropdown{ 51 position: absolute; 52 left: -100% !important; 53 } 54 nav.navbar.bootsnav li.dropdown ul.dropdown-menu{ 55 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 56 border: none; 57 } 58 @media only screen and (max-width:990px){ 59 nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after, 60 nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; } 61 .dropdown-menu.multi-dropdown{ left: 0 !important; } 62 nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; } 63 nav.navbar.bootsnav ul.nav > li > a{ margin: 0; } 64 } 65 </style>
第五步：写入所需的三个js代码，可以百度搜索jquery插件和bootstrap的js，包括bootsnav.js：
JS代码：
1 <script type="text/javascript" src="js/jquery.min.js"></script> 2 <script type="text/javascript" src="js/bootstrap.min.js"></script> 3 <script type="text/javascript" src="js/bootsnav.js"></script>
希望能够帮助看到这篇帖子的每个技术小伙伴。加油哦！