导航条
基础导航条
实际上，导航条和导航在外观上的差别并不是那么的大，但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。
基础导航条
实际上，导航条和导航在外观上的差别并不是那么的大，但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。
可以达到的效果是这样的：
宽屏：
窄屏：
在制作一个基础导航条时，主要注意以下几点：
1.首先在制作导航的列表(
当然也可以用来做logo， 中文官网描述 ，在此不进行详细描述。
二级菜单自然不用多说，在上一篇博客中已经进行了详细说明，若还是不太了解的话，可以再去翻翻我的上一篇博客，我们一起来看看下面这段代码以及能实现的效果：（注意这里使用的是 navbar-inverse 反色的导航条）
效果如下：
带表单
我们常常在导航条中都能看到搜索表单，比如知乎，新浪微博等等都具有，Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单：
在Bootstrap框架中提供了一个 .navbar-form ，在 .navbar 容器中放置一个带有 .navbar-form 类名的表单；再添加 .navbar-left 让表单左浮动，更好实现对齐。
在Bootstrap中，还提供了 .navbar-right 样式，让元素在导航条靠右对齐。
按钮、文本和链接
除了上面的一些样式之外，bootstrap框架提供了三种其他样式：
1.导航条中的按钮 navbar-btn ，使不在
分析：
和普通导航条一样，最外层使用
保证在窄屏时 需要折叠的内容必须 包裹在带一个div内，并且为这个div加入 .collapse 、 .navbar-collapse 两个类名。最后为这个div 添加一个class类名或者id名 。
保证在窄屏时要显示的图标样式（固定写法）：
并为button添加 data-target=”.类名/#id名” ，究竞是类名还是id名呢？由 需要折叠的div 来决定。（这里很关键，你可以把上面的代码在这里进行修改，会发现无法展开）
分页导航几乎在所有的网站都可以看到，好的分页导航可以给用户带来更好额用户体验，还可以方便爬虫在网页中进行搜索。
带页码的分页导航
带页码的分页导航，应该是最常见的一种分页导航，特别是在列表页内容很多的时候，会给用户提供带页码的分页导航方式，在Bootstrap中使用的是 ul>li>a 这样的结构，在ul标签上加入 pagination 类：
实现效果如下：
可以看到同样会有 hover 、 active 、 disabled 等等状态，当然它也可以调整大小：在外层容器中的 .pagination 类后，添加 .pagination-lg 让分页导航变大； .pagination-sm 让分页导航变小：
其实这种方式，就是看不到具体的页码，只会提供一个 上一页 和 下一页 的按钮。
它默认是居中显示的，如果我们需要一个居左一个居右显示的话，添加两个样式： prevIoUs 让“上一步”按钮居左； next 让“下一步”按钮居右。（同样可以使用 disabled 表示禁用状态）
其他
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。
在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用 这样的行内标签添加 .label 类来控制大小，再使用情景类来控制高亮显示的颜色如： label-default 、 label-danger 等等（在原来笔记中说到过这样的情景类，只不过这里需要加上不同的前缀）
其实和上面的标签效果很大一部分是类似的，一般用作信息提示，例如剩余多少未读信息等等，也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中，把这种效果称作为徽章效果，使用 badge 类来实现。
给链接、导航等元素嵌套
通过查看源码，我们可以发现Bootstrap同样使用 :empty 伪元素，来设置当没有内容的时候隐藏：
需要注意的是IE8 不支持 :empty 选择符，所以不会默认隐藏；
Bootstrap 中的徽章会适配导航元素的激活状态。
关于Bootstrap入门书籍之（五）导航条、分页导航就给大家介绍到这里，希望对大家有所帮助！
