本篇文章带大家聊聊bootstrap实战，介绍一下bootstrap的响应式布局，希望对大家有所帮助！
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。
在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
一、知识点
1.1 导航栏
官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
1.1.1 基础导航栏
使用 Bootstrap 之前，习惯用
- +
- 来构造一个导航栏。【相关推荐：《bootstrap教程》】
<!--代码部分--><style>.navigation-past{ list-style: none;}.navigation-past>li{ float: left; padding: 8px;}.navigation-past>li>a{ text-decoration: none; color: #000;}.active-past{ background: #E7E7E7;}</style>- Navigation First
- Navigation Second
- Navigation Third
- Navigation Fourth
- Navigation Fifth
效果图：
使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在
- 外面套一层 ，并加上样式 navbar navbar-default；然后给里面的
- 加上样式 nav navbar-nav；最后，给选中的部分加上样式 active。一个最基本的 Bootstrap 导航便完成了。
<!--代码部分--><p> <ul> <li><a>Navigation First</a></li> <li><a>Navigation Second</a></li> <li><a>Navigation Third</a></li> <li><a>Navigation Fourth</a></li> <li><a>Navigation Fifth</a></li> </ul></p>
效果图：
这里在最外层加了一个 role="navigation" 的属性，这里是 HTML5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。
1.1.2 进阶的导航栏
在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层
里面加一个样式 navbar-header 的 ，这个 内再加一个样式 navbar-brand 的 元素。<!--代码部分--><p><p><a>LOGO</a></p> <ul> <li><a>Navigation First</a></li> <li><a>Navigation Second</a></li> <li><a>Navigation Third</a></li> <li><a>Navigation Fourth</a></li> <li><a>Navigation Fifth</a></li> </ul></p>
效果图：
有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的
- 元素中添加样式 dropdown， 元素中添加样式 dropdown-toggle 和属性 data-toggle="dropdown"；然后在
- 里面 下面在放一个
- +
- 组合，
- 标签添加样式 dropdown-menu。
<!--代码部分--><p><p><a>LOGO</a></p> <ul> <li><a>Navigation First</a></li> <li><a>Navigation Second</a></li> <li><a>Navigation Third</a></li> <li><a>Navigation Fourth</a></li> <li> <a> Navigation Fifth <ul> <li><a>Sub-Navigation First</a></li> <li><a>Sub-Navigation Second</a></li> <li><a>Sub-Navigation Third</a></li> </ul> </a> </li> </ul></p>
效果图：
这里又出现新的属性 aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里引用 Segmentfault 社区姜中秋的回答。
aria-haspopup: true 表示点击的时候会出现菜单或是浮动元素；false 表示没有 pop-up 效果。aria-expanded: 表示展开状态。默认为 undefined, 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false 表示元素不是展开的。
平常所见到的下拉框一般都有一个向下的箭头符号 ▼，同样的，在 Bootstrap 中也支持这一效果，只不过需要引入她自带的字体库 Glyphicons 字体图标。
官方介绍：Bootstrap 包括 250 多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个 友情链接。
使用方法：新建一个 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。
Glyphicons 字体图标使用示例：
<!--代码部分-->
- Navigation Fifth
- Sub-Navigation First
- Sub-Navigation Second
- Sub-Navigation Third
- Glyphicons 字体图标和文本之间添加一个空格，不然会影响样式（padding）的正确显示。
- 服务器需要正确添加相应的 MIME 类型，否则加载字体会报 404 错误。
效果图：
注意：
另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：。
1.1.3 响应式导航栏
在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题
内加上一段固定写法的代码；然后在需要在小屏时折叠的- 元素外包一层样式 collapse navbar-collapse 的 元素，并给这个元素加上任意名称的 ID，例如：；最后在响应式按钮
- 组合，