这个固定的导航条会 遮住页面上的其它内容 ，除非你给 <body> 元素底部设置了 padding 。提示：导航条的 默认高度 是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。
响应式导航条
在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！
窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：
<div role="navigation"> <div> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="#">WEB开发</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> </ul> </div> </div>
分析：
和普通导航条一样，最外层使用 <div role="navigation"> 容器包裹，主要是 .navbar 和 .navbar-default 类。
保证在窄屏时 需要折叠的内容必须 包裹在带一个div内，并且为这个div加入 .collapse 、 .navbar-collapse 两个类名。最后为这个div 添加一个class类名或者id名 。
保证在窄屏时要显示的图标样式（固定写法）：
<button type="button" data-toggle="collapse"> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
并为button添加 data-target=”.类名/#id名” ，究竞是类名还是id名呢？由 需要折叠的div 来决定。（这里很关键，你可以把上面的代码在这里进行修改，会发现无法展开）
分页导航
分页导航几乎在所有的网站都可以看到，好的分页导航可以给用户带来更好额用户体验，还可以方便爬虫在网页中进行搜索。
带页码的分页导航
带页码的分页导航，应该是最常见的一种分页导航，特别是在列表页内容很多的时候，会给用户提供带页码的分页导航方式，在Bootstrap中使用的是 ul>li>a 这样的结构，在ul标签上加入 pagination 类：
<ul> <li><a href="#">«第一页</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">最后一页»</a></li> </ul>
实现效果如下：
可以看到同样会有 hover 、 active 、 disabled 等等状态，当然它也可以调整大小：在外层容器中的 .pagination 类后，添加 .pagination-lg 让分页导航变大； .pagination-sm 让分页导航变小：
翻页分页导航
其实这种方式，就是看不到具体的页码，只会提供一个 上一页 和 下一页 的按钮。
使用方式很简单，也就是在ul标签上添加 pager 类：
<ul> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul>