说明：
1. 响应式导航栏，就是右上角的三道杠，点一下下方出现隐藏的导航栏。如果屏幕够大就显示所有的导航选项，如果屏幕小比如手机，就显示部分，剩下的放到三道杠里隐藏。
2. 外面套一个大的div，其实建议用nav标签，语义化一点呗！类名是navbar，说明这是个导航条，如果不带，后面的内容会移上来。navbar-default这是个皮肤，默认的那种，不带难看。
3. 里面分两部分，首先是navbar-header，这个是主页选项专用，里面放个navbar-brand显示字体会大一点。下面呢个button就是右上角的三道杠按钮，里面的类navbar-toggle是给这个button加个样式，让他处于导航条的右边，不加的话是呢个熊样你可以试试。data-toggle="collapse"跟下拉菜单data-toggle="dropdown"一个尿性，表明这个是三条杠导航。data-target="#shownav"指定点击三道杠后弹出啥玩意，跟幻灯片轮播里的指定哪个div里的图片，作用相同。后面的三个span就是画了三道杠。这样这个三道杠button就做好了，真特娘的累！
4. 继续，下面是包含需要隐藏的导航选项的ul，id="shownav"就是给上面的data-target用的，表示点一下三道杠出现这个ul。nav navbarnav是导航条的类，不想解释了。。collapse类是指这个ul是默认隐藏的，在点三道杠之前别特么给我出来！navbar-collapse是屏幕大的时候需要显示这些隐藏的导航选项，如果不加，大屏的时候就不显示了，只能小屏的时候点三道杠才显示。
5. ok，这样整个响应式导航就做完了。
效果图：
大屏幕：
小屏幕：
代码（需要先引入bootstrap和jquey）：
1 <div class="navbar navbar-default"> 2 <div class="navbar-header"> 3 <a class="navbar-brand" href="">主页</a> 4 <button class="navbar-toggle" data-toggle="collapse" data-target="#shownav"> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 </div> 10 11 <ul id="shownav" class="nav navbar-nav collapse navbar-collapse"> 12 <li><a href="">电影</a></li> 13 <li><a href="">游戏</a></li> 14 <li><a href="">小说</a></li> 15 <li><a href="">音乐</a></li> 16 <li> 17 <a class="dropdown" data-toggle="dropdown" href="">其他<span class="caret"></span></a> 18 <ul class="dropdown-menu"> 19 <li><a href="">漫画</a></li> 20 <li><a href="">软件</a></li> 21 <li><a href="">视频</a></li> 22 23 </ul> 24 </li> 25 </ul> 26 27 28 </div>
总结：真特娘的累！麻烦！这特娘的十几个类啊！少一个都不行啊！我为啥不直接用jquery点击隐藏ul再点击显示ul啊！加个屏幕大小判断！明天研究一下！