撩汉子撩汉子撩撩bootstrap响应式导航这个小汉纸

浪啊浪啊浪~ 我要在代码的海洋里浪飞天~~~

一个个浪过去，先来撩一个名叫BootStrap的汉纸，从头开始，我要把它剥光光（⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）

那就先从导航部分开始，级别低的我看不上，我们来一个高级别的响应式的，要聪明的，自觉地，就类似这样子的：

什么是响应式呢? 就是窗口变大变小的时候实现不一样的样子，也就是自己去适应不同的环境，而不是我去迁就他（应该放帅哥哥的，失误失误）

那其实BootStrap本身就是响应式不是，其实这个还是挺好做的，给你个充气娃娃（我允许你拿我的当模板）

然后只要知道导航的几个组件就ok了，至于组件的一些样式什么的呢，看你心情，你想要帅哥还是大叔 ，姑娘还是人妖，自己去组合鼻子眼睛

那我们就来看下我写的这个用到的几个导航组件（不过基本已经把常用的都包含上了）：

其实啊，真正的颜值在于上边的按钮，也就是这一段

button就是右上角的三道杠按钮，里面的类navbar-toggle是给这个button加个样式，让他处于导航条的右边，不加的话是呢个熊样你可以试试。data-toggle="collapse"跟下拉菜单data-toggle="dropdown"一个尿性，表明这个是三条杠导航。data-target="#bs-example-navbar-collapse-1"指定点击三道杠后弹出啥玩意，跟幻灯片轮播里的指定哪个div里的图片，作用相同。后面的三个span就是画了三道杠。这样这个三道杠button就做好了，真特娘的累！

下面是包含需要隐藏的导航选项的ul，id="bs-example-navbar-collapse-1"就是给上面的data-target用的，表示点一下三道杠出现这个ul。collapse类是指这个ul是默认隐藏的，在点三道杠之前别特么给我出来！navbar-collapse是屏幕大的时候需要显示这些隐藏的导航选项，如果不加，大屏的时候就不显示了，只能小屏的时候点三道杠才显示。

如此，一个听话的美美的汉纸头就出来啦，哈哈哈

头好了肯定还要完美的身材对不对，我们下回清早，当然可以先收藏慢慢做，欢迎加群142991222一起分享探讨，噶散户，泡汉子撩妹子

等着你哦