Bootstrap中，用于定义导航的元素需要放在.nav内。
这时，如果没有加入其他的nav-xxx的修饰类的话，样式是非常难看的。我们可以通过其他的类样式，如.nav-tabs（标签型导航）,.nav-pills（胶囊型导航）。
1.默认状态下，每个li树成一条垂直显示，唯一的作用是会随着鼠标移动为相近的li添加灰色背景。
关于Bootstrap对nav类设置的具体源码可以参考，源文件（3.3.7版本）3974行~4017行。
1 .nav {
2 padding-left: 0;
3 margin-bottom: 0;
4 list-style: none;
5 }
6 .nav > li {
7 position: relative;
8 display: block;
9 }
更详细的包括：.nav>li>a（以及两个伪类）、.nav>li.disabled>a 、.nav.open>a（以及两个伪类）、.nav.nav-divider 和.nav>li>a>img。
2. 标签型导航 .nav-tabs:
标签形导航，也称为选项卡导航。效果如图：
1 <ul class="nav nav-tabs">
2 <li><a href=##>随笔</a></li>
3 <li>文章</li>
4 <li>日记</li>
5 <li>评论</li>
6 </ul>
为了做对比…特意只在第一个<li>中添加了a链接，对比非常鲜明。有a链接的在鼠标悬停时，会自动添加灰色背景以及字体由蓝变灰蓝。
ps：底部的下划线会延伸至整个屏幕。
源代码可参考源文件（3.3.7版本）4018~4086行。
1 .nav-tabs {
2 border-bottom: 1px solid #ddd;
3 }
4 .nav-tabs > li {
5 float: left;
6 margin-bottom: -1px;
7 }
8 .nav-tabs > li > a {
9 margin-right: 2px;
10 line-height: 1.42857143;
11 border: 1px solid transparent;
12 border-radius: 4px 4px 0 0;
13 }更详细的设置包括：nav-tabs里a的伪类、.nav-tabs.nav-justified（自适应导航）以及其a链接和伪类。
3.胶囊型导航 .nav-pills ：
胶囊型导航当前高亮显示，并带圆角效果。
源代码可参考源文件（3.3.7版本）第4087~4101行。
1 .nav-pills > li {
2 float: left;
3 }
4 .nav-pills > li > a {
5 border-radius: 4px;
6 }
7 .nav-pills > li + li {
8 margin-left: 2px;
9 }
10 .nav-pills > li.active > a,
11 .nav-pills > li.active > a:hover,
12 .nav-pills > li.active > a:focus {
13 color: #fff;
14 background-color: #337ab7;
15 }效果如图：
在胶囊型导航上，另有它的进化式，垂直型胶囊导航。只需再增添.nav-stacked即可。
1 .nav-stacked > li {
2 float: none;
3 }
4 .nav-stacked > li + li {
5 margin-top: 2px;
6 margin-left: 0;
7 }垂直型胶囊导航的width自动变成了父元素的100% 。
延伸下，垂直型胶囊导航可再增添 .nav-divder类，起到增添分隔线的作用。
关于.nav-divder设置的两个注意点：
(1)是对li的class进行设置，li class=".nav-divder" ;
(2)设置了.nav-divder的li里面无需填充其他内容了，反正都不显示…只显示一行分隔线。
效果如图：
ps:“随笔”设置了active，“文章”是伪类悬停。
4.自适应导航 ,nav-justified ：
原理：列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示。
该类不能单独使用，需要依托.nav-tabs或.nav-pills共同使用。
源代码可见源文件（3.3.7版本）第4109~4154行。
1 .nav-justified {
2 width: 100%;
3 }
4 .nav-justified > li {
5 float: none;
6 }
7 .nav-justified > li > a {
8 margin-bottom: 5px;
9 text-align: center;
10 }
11 .nav-justified > .dropdown .dropdown-menu {
12 top: auto;
13 left: auto;
14 }
15 @media (min-width: 768px) {
16 .nav-justified > li {
17 display: table-cell;
18 width: 1%;
19 }
20 .nav-justified > li > a {
21 margin-bottom: 0;
22 }
23 }另有针对.nav-tabs和.nav-pills下的具体设置。
5.二级导航（在原有导航的基础上增添下拉菜单）：
制作二级导航，只需要在原有导航的基础上，将li当作父容器并赋值，li class="dropdown”，同时将li中a的属性增添上 class="dropdown-toggle" data-toggle="dropdown" ，这是为Javascript做准备的。并在li中嵌套子列表ul，ul class="dropdown-menu"。
1 <ul class="nav nav-tabs">
2 <li class="active"><a href="##"> 随笔</a></li>
3 <li class="dropdown"><a href="##" class="dropdown-toggle" data-toggle="dropdown">日记<span class="caret"></span></a>
4 <ul class="dropdown-menu">
5 <li><a href="##"> 2017年</a></li>
6 <li><a href="##"> 2016年</a></li>
7 <li><a href="##"> 2015年</a></li>
8 <li><a href="##"> 2014年</a></li>
9 </ul></li>
10 <li><a href="##”>评论</a></li>
11 <li><a href="##">问答</a></li>
12 </ul>效果显示：
当然再次点击是可以收回的。
通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名。
正是通过open这个类，来控制二级导航显示与否，并且设置了背景色和边框。
源代码可见源文件（3.3.7版本）的第4003~4008行。
1 .nav .open > a,
2 .nav .open > a:hover,
3 .nav .open > a:focus {
4 background-color: #eee;
5 border-color: #337ab7;
6 }
6.面包屑导航
能让你清楚地明白自己在网站中处于什么样的位置，以及父页面和怎么返回。
就是一个小小的面包屑导航。
面包屑导航的制作也很简单，为所需的导航列表加上 .breadcrumb
源代码可见源文件（3.3.7版本）第4693~4710行即可。
1 .breadcrumb {
2 padding: 8px 15px;
3 margin-bottom: 20px;
4 list-style: none;
5 background-color: #f5f5f5;
6 border-radius: 4px;
7 }
8 .breadcrumb > li {
9 display: inline-block;
10 }
11 .breadcrumb > li + li:before {
12 padding: 0 5px;
13 color: #ccc;
14 content: "/\00a0";
15 }
16 .breadcrumb > .active {
17 color: #777;
18 }content: "/\00a0" ，CSS content中要使用Unicode编码，才可以显示想要的特殊符号。这里等同于"/ "。
演示如下：1 <ol class="breadcrumb">
2 <li><a href="#">Home</a></li>
3 <li><a href="#">2013</a></li>
4 <li class="active">十一月</li>
5 </ol>
.nav 的相关内容暂告一段落，下一篇学习 .navbar
emmmm...其实挺赘余的。新手上路哈。
