一、介绍响应式布局是指一个网站可以兼容多种终端，而不是针对每个终端做一个特定的版本。这个概念就是为了解决手机上网浏览而诞生的。导航栏和轮播在大多数网站的头部占比都很高，尤其是导航栏，起到站点地图的作用。在响应式布局中，导航栏需要根据终端屏幕尺寸显示不同的样式。2.知识点2.1官方对导航栏的解释：导航栏是一个响应式的基础组件，在你的应用或网站中用作导航头。它们在移动设备上是可折叠的（并且可以打开和关闭），并随着视口宽度的增加逐渐变为水平扩展模式。2.1.1基本导航栏在使用Bootstrap之前，习惯上使用
- +
- 来构造导航栏。
- 外面包裹一层
- 元素添加样式dropdown，给元素添加样式dropdown-toggle和属性data-toggle="dropdown"；
- +
- 组合后，
- 标签添加样式下拉菜单。
- 组合后，
，添加样式navbarnavbar-default；然后将样式导航navbar-nav添加到内部
效果图：这里最外层添加了一个role="navigation"属性，这里是HTML5标签属性，目的是让标签语义化，方便屏幕阅读器识别，以及也是为了方便特殊人群浏览。2.1.2高级导航栏浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司LOGO和夸张的轮播图。Bootstrap在导航中保留了LOGO的位置??。使用方法是在外面的- ；最后，将样式添加到所选部分。基本的Bootstrap导航已经完成。
中添加一个样式为navbar-header的
，在这个导航优先
渲染：有时候一级导航不够，需要使用二级导航显示更多内容。使用方法：首先给需要添加二级导航的中添加一个样式为navbar-brand的元素。LOGO