本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹：bootstrap教程（二） —— 導航條
導航（標籤形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>
實現原理非常的簡單，將菜單項（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"”即可：
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
對應樣式代碼如下：
/*源碼請查閱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"”即可：
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
實現這個效果的樣式，在默認樣式“.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插件，這部分將在後面的教程中會介紹。