整理自慕課筆記

基礎樣式

導航對于一位前端人員來說并不陌生。可以說導航是一個網站重要的元素組件之一，可以便于用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在這一節中將向大家介紹如何使用Bootstrap框架制作各式各樣的導航。
Bootstrap框架中制作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類

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

標簽形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>

一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class=”active””即可：

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

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

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

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

膠囊形(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>