Bootstrap学习笔记（8）--响应式导航栏

说明：

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）：

 <div class="navbar navbar-default">
         <div class="navbar-header">
             <a class="navbar-brand" href="">主页</a>
             <button class="navbar-toggle" data-toggle="collapse" data-target="#shownav">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
         </div>

             <ul id="shownav" class="nav navbar-nav collapse navbar-collapse">
                 <li><a href="">电影</a></li>
                 <li><a href="">游戏</a></li>
                 <li><a href="">小说</a></li>
                 <li><a href="">音乐</a></li>
                 <li>
                     <a class="dropdown" data-toggle="dropdown" href="">其他<span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="">漫画</a></li>
                         <li><a href="">软件</a></li>
                         <li><a href="">视频</a></li>

                     </ul>
                 </li>
             </ul>

     </div>

总结：真特娘的累！麻烦！这特娘的十几个类啊！少一个都不行啊！我为啥不直接用jquery点击隐藏ul再点击显示ul啊！加个屏幕大小判断！明天研究一下！