导航
1）基础样式
在ul标签中添加类名“nav”即表示默认导航栏
样式，需要在后面追加类名“nav-tabs”或者”nav-pills”
如：
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
效果：
2）标签形tab导航栏
选卡导航栏
如上图代码以及效果
讲菜单项分块显示，并水平排列，定义高亮样式以及鼠标悬浮样式
如果想要某一块高亮可以在li上加类名“active”
如果需要禁用，就必须在li加上类名“disabled”
3）胶囊型导航
在ul的默认类名nav后加上“nav-pills”
4）垂直堆叠导航
在ul胶囊导航类名nav nav-pills后加上类名“nav-stacked”
原理：让导航项不悬浮，让其垂直排列且留有一定间距
同样也可以实现分割线效果：
在导航项之间添加
<li class=“nav-divider"></li>
5）自适应导航
宽度占据整个容器，但是可以自动调节每个选项的大小宽度
使用方法：
配合nav-pills nav-tabs使用
在其后面添加一个类名nav-justified
类似之前的btn-group-justified
原理：
使ul设置宽度为100%，然后每个菜单项设置display:table-cell，让表项模拟表哥单元格的形式显示
6）导航加下拉菜单（二级导航）
其余与导航栏相同，只是在导航项的li改动
将一个li作为父容器，使用类名“dropdown”，同时嵌套另一个ul作为菜单项
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
7）面包屑式导航
一般用于导航，告诉用户现在处于哪个页面
使用方法：
在ol加上类名“breadcrumb”
代码如下：
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
表示现在正在（图解css）部分