导航（标签形tab导航）标签形导航，也称为选项卡导航。
特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。
在制作标签形导航时需要在原导航“nav”上追加此类名，如：


Home


CSS3


Sass


jQuery


Responsive


实现原理非常的简单，将菜单项（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;}
其实上例的效果和我们平时看到的选项卡效果并不一致。
一般情况之下，选项卡教会有一个当前选中项。
其实在Bootstrap框架也相应提供了。
假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：


Home
…

对应样式代码如下：/*源码请查阅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;
}
除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加
“class="disabled"”即可：


Home
…

Responsive


实现这个效果的样式，在默认样式“.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;}
注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后面的教程中会介绍。
本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：bootstrap教程（二） —— 导航条