標(biāo)簽形導(dǎo)航，也稱為選項(xiàng)卡導(dǎo)航。特別是在很多內(nèi)容分塊顯示的時(shí)，使用這種選項(xiàng)卡來分組十分適合。

標(biāo)簽形導(dǎo)航是通過“nav-tabs”樣式來實(shí)現(xiàn)。在制作標(biāo)簽形導(dǎo)航時(shí)需要在原導(dǎo)航“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>

運(yùn)行的效果如下所示：

實(shí)現(xiàn)原理非常的簡(jiǎn)單，將菜單項(xiàng)（li）按塊顯示，并且讓他們?cè)谕凰缴吓帕校缓蠖x非高亮菜單的樣式和鼠標(biāo)懸浮效果。代碼如下：

/*源碼請(qǐng)查閱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;
}

其實(shí)上例的效果和我們平時(shí)看到的選項(xiàng)卡效果并不一致。一般情況之下，選項(xiàng)卡教會(huì)有一個(gè)當(dāng)前選中項(xiàng)。其實(shí)在Bootstrap框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項(xiàng)為當(dāng)前選中項(xiàng)，只需要在其標(biāo)簽上添加類名“class="active"”即可：

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

運(yùn)行效果如下：

對(duì)應(yīng)樣式代碼如下：

/*源碼請(qǐng)查閱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;
}

除了當(dāng)前項(xiàng)之外，有的選項(xiàng)卡還帶有禁用狀態(tài)，實(shí)現(xiàn)這樣的效果，只需要在標(biāo)簽項(xiàng)上添加“class="disabled"”即可：

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

運(yùn)行效果如下：

實(shí)現(xiàn)這個(gè)效果的樣式，在默認(rèn)樣式“.nav”中就帶有：

/*源碼請(qǐng)查看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;
}

注意：我們看到的選項(xiàng)卡效果，點(diǎn)擊菜單項(xiàng)就可以切換內(nèi)容，如果要實(shí)現(xiàn)這樣的效果需要配合js插件，這部分將在后面的教程中會(huì)介紹。