Bootstrap每天必学之导航

1、导航（基础样式）

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。

在Bootstrap框架将导航独立出来成为一个导航组件，根据不同的版本，可以找到对应的源码：

☑ LESS版本：对应的源文件是navs.less

☑ Sass版本：对应的源文件是_navs.scss

☑ 编译后版本：对应源码是bootstrap.css文件第3450行～第3641行

导航基础样式

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。

<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>

</div>

/源码请查阅bootstrap.css文件第3450行~第3493行/

.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav> li {
 position: relative;
 display: block;
}
.nav> li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
 background-color: #eee;
 border-color: #428bca;
}
.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.nav> li > a >img {
 max-width: none;
}

</div>

2、导航（标签形tab导航）

标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如：

<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>

</div>

运行的效果如下所示：

实现原理非常的简单，将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下：

/源码请查阅bootstrap.css文件第3494行～第3509行/

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

</div>

其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：

<ul class="nav nav-tabs">
 <li class="active"><a href="##">Home</a></li>
 …
</ul>

</div>

运行效果如下：

对应样式代码如下：

/源码请查阅bootstrap.css文件第3510行～第3518行/

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

</div>

除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class=”disabled””即可：

<ul class="nav nav-tabs">
  <li class="active"><a href="##">Home</a></li>
  …
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

</div>

运行效果如下：

实现这个效果的样式，在默认样式“.nav”中就带有：

/源码请查看bootstrap.css文件第3469行～第3478行/

.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

</div>

注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后面的博客中会介绍。

3、导航（胶囊形(pills)导航）

胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可：

<ul class="nav nav-pills">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

</div>

实现效果样式代码：

/源码请查阅bootstrap.css文件第3563行～第3577行/

.nav-pills > li {
 float: left;
}
.nav-pills > li > a {
 border-radius: 4px;
}
.nav-pills > li + li {
 margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
 background-color: #428bca;
}

</div>

4、导航（垂直堆叠的导航）

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可(stacked就是堆的意思)：

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

</div>

运行效果如下：