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

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

運行的效果如下所示：

實現(xiàn)原理非常的簡單，將菜單項（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框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class="active"”即可：

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

運行效果如下：

對應(yī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;
}

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

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

運行效果如下：

實現(xiàn)這個效果的樣式，在默認樣式“.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;
}

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