bootstrap前端框架模板，Bootstrap_導航

一、標簽形tab導航

　　標簽形導航，也稱為選項卡導航。

　　標簽形導航是通過“.nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“.nav”上追加此類名。

<ul class="nav nav-tabs"><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>

bootstrap前端框架模板？我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名".active”即可。

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

選項卡還帶有禁用狀態，只需要在標簽項上添加".disabled”即可。

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

二、膠囊形（pills）導航

　　當前項高亮顯示，并帶有圓角效果。

　　標簽形導航是通過“.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>

bootstrap左側導航欄，?

三、垂直堆疊的導航

　　制作垂直堆疊導航只需要在“nav-pills”的基礎上添加一個“nav-stacked”類名即可。

<ul class="nav nav-pills nav-stacked"><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>

四、自適應導航

bootstrap菜單導航、自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。

只不過在制作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

<ul class="nav nav-tabs nav-justified"><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><a href="##">Responsive</a></li>
</ul>

五、導航加下拉菜單（二級導航）

　　在Bootstrap框架中制作二級導航，只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul。

<ul class="nav nav-pills"><li class="active"><a href="##">首頁</a></li><li class="dropdown"><a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a><ul class="dropdown-menu"><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><li><a href="##">關于我們</a></li>
</ul>

bootstrap側邊導航欄。六、面包屑式導航

　　面包屑(Breadcrumb)一般用于導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）。

　　在Bootstrap框架中面包屑也是一個獨立模塊組件。使用方式就很簡單，為ol加入“breadcrumb”類。

<ol class="breadcrumb"><li><a href="#">首頁</a></li><li><a href="#">我的書</a></li><li class="active">《圖解CSS3》</li>
</ol>

?