整理自慕課筆記
基礎樣式
導航對于一位前端人員來說并不陌生。可以說導航是一個網站重要的元素組件之一，可以便于用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在這一節中將向大家介紹如何使用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>
垂直堆疊的導航
在實際運用當中，除了水平導航之外，還有垂直導航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導航只需要在“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>
垂直堆疊導航與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，然后給相鄰導航項留有一定的間距。大家是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具有這樣的效果，只需要添加在導航項之間添加<li class=”nav-divider”></li>即可：
<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="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li></ul>
或許你會問，如果我在”nav-tabs”上添加“nav-stacked”是不是也能實現垂直的標簽選項導航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本將這個效果取消了，可能作者覺得垂直選擇項并不太常見，也不美觀吧。
自適應導航
使用
自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”制作的自適應按鈕組是一樣的。只不過在制作自適應導航時更換了另一個類名“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>
實現原理
實現原理并不難，列表<ul>上設置寬度為“100%”，然后每個菜單項<li>設置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示
導航加下拉菜單（二級導航）
前面介紹的都是使用Bootstrap框架制作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那么在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> … </ul> </li> <li><a href="##">關于我們</a></li></ul>
面包屑式導航
面包屑(Breadcrumb)一般用于導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件
使用方法
使用方式就很簡單，為ol加入breadcrumb類：
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">我的書</a></li> <li class="active">《圖解CSS3》</li></ol>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
