欢迎收看大奥编写的Bootstrap快速学习笔记（5）导航条与分页导航
本学习笔记根据[慕课网]教程修改而来，用它学习Bootstrap，将会带来全新的体验哦：
- 基础导航条
- 带表单的导航条
- 导航条中的按钮、文本和链接
- 固定导航条
- 响应式导航条
- 反色导航条
- 分页导航
- 导航标签
详细介绍
- 基础导航条
首先在制作导航的基础之上，在ul的nav类名后面追加navbar-nav类，其次在外围添加一个div容器，并设置class属性为navbar navbar-default；为导航条添加标题的方式为，在该ul标签同级的前边添加一个class类为navbar-header的div元素，内部有一个a元素，其class类为navbar-brand； - 带表单的导航条
通过在navbar的div容器中也就是ul标签的同级之后添加一个form表单来实现，该表单要有navbar-form和navbar-left的类，下面还有带有form-group类的div元素来包含input控件，并且在该div元素同级要有提交按钮来实现； - 导航条中的按钮、文本和链接
通过给li中的a元素来添加class类来实现，navbar-btn avbar-text avbar-link，但是需要和navbar-brand以及navbar-nav配合起来使用，而且对数量也有一定限制，两个以上会出现排版问 题；如果要使用多个navbar-text，那就把a元素外围的li标签去掉，直接写a以及class类； - 固定导航条
通过给最外围带有navbar navbar-default类的div标签追加class类来实现，navbar-fixed-top avbar-fixed-bottom，但单单这样做还不够，我们要给body设置对应的内边距，如果导航条固定到上方，就给body设置padding-top:70px;如果导航条固定到下方，就给body设置padding-bottom:70px; - 响应式导航条
主要分为两个部分，这两个部分都夹在同一个div标签里，该div标签具有navbar navbar-default的class类；第一部分外围是一个navbar-header的div标签，里面是一个button按钮和带有navbar-brand的a标签，这个a标签无论宽屏还是窄屏的时候都显示，而这个button标签是在窄屏的时候显示，<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">，其中的data-target与第二部分中外部容器div的class标识或id标识对应，这里就说到第二部分，这是一个包含显示条目的无序列表，就包含在刚才所说的一个div容器里边，这个div容器这样写<div class="collapse navbar-collapse navbar-responsive-collapse">，前两个是必须的，第三个是与data-target对应的类名，当然也可以使用id属性，只要能被识别就行，接下来是一个普通的导航条，ul带有nav navbar-nav的class属性，下级是几个包含a元素的li标签，其中正在浏览项用active类标识出来； - 反色导航条
其实就是将普通导航条的背景色和前景色倒置，通过给最外围div标签更改class类来实现，navbar navbar-default改为navbar navbar-inverse； - 分页导航
分页导航分为带页码的分页导航与翻页分页导航：第一种就是用ul>li>a来实现，在ul上添加pagination类，如果需要改变大小的话，再追加pagination-lgpagination-small类，当前所在页和禁用按钮无法点击要通过js来实现，或者将a标签改成span标签，并且这种带页码的分页导航，有多少页码都会显示出来，不会隐藏；第二种也是用ul>li>a来实现，在ul上添加pager类，上一页按钮添加previous类，下一页按钮添加next类，用于将两个按钮从默认的居中状态转为一个居左一个居右； - 导航标签
导航标签就是类似"new""hot"效果的小标签，实现方法就是给某个导航条目添加一个<span>标签，带有label label-XXX的class类信息，其中XXX可以是defaultprimarysuccessinfowarningdanger；导航徽章就是类似未读消息数目的数字徽章，椭圆形框显示，实现方式与标签基本相同，需要把class类改为badge，如果将span标签放在主要显示内容前边，需要给span标签再追加一个pull-right类来使徽章数字居右显示；
注意：知识的积累是一个漫长的过程，请继续关注后续内容。