前面的話

　　導航對於一位前端人員來說並不陌生。可以說導航是一個網站重要的元素組件之一，便於用戶查找網站所提供的各項功能服務。本文將詳細介紹Bootstrap導航

基礎樣式

　　Bootstrap框架中制作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類

　　如果在使用導航組件實現導航條功能，務必在 <ul> 的最外側的邏輯父元素上添加 role="navigation"

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav> li {
  position: relative;
  display: block;
}
.nav> li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
  text-decoration: none;
  background-color: #eee;
}
.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;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav> li > a >img {
  max-width: none;
}
 

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

選項卡

　　標簽形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。標簽形導航是通過“nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“nav”上追加此類名

　　實現原理非常的簡單，將菜單項（li）按塊顯示，並且讓他們在同一水平上排列，然後定義非高亮菜單的樣式和鼠標懸浮效果

　　一般情況下，選項卡會有一個當前選中項。其實在Bootstrap框架也相應提供了，只需要在其標簽上添加類名"active"。除了當前項之外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需要在標簽項上添加類名"disabled"

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

膠囊導航

　　膠囊形（pills）導航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
  background-color: #428bca;
}

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

自適應導航

　　自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”制作的自適應按鈕組是一樣的。只不過在制作自適應導航時更換了另一個類名“nav-justified”。當然需要和“nav-tabs”或者“nav-pills”配合在一起使用

　　在大於 768px 的屏幕上，通過 .nav-justified 類可以很容易的讓標簽頁或膠囊式標簽呈現出同等寬度。在小屏幕上，導航鏈接呈現堆疊樣式

　　實現原理並不難，列表（<ul>）上設置寬度為“100%”，然後每個菜單項(<li>)設置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示

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

二級導航

　　很多時候，在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>
            <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>

面包屑導航

　　面包屑(Breadcrumb)一般用於導航，主要作用是告訴用戶現在所處頁面的位置（當前位置），使用方式就很簡單，為ol加入breadcrumb類：

　　面包屑導航(BreadcrumbNavigation)這個概念來自童話故事"漢賽爾和格萊特"，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發現在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。所以，面包屑導航的作用是告訴訪問者他們目前在網站中的位置以及如何返回

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">前端</a></li>
  <li class="active">CSS</li>
</ol> 

Bootstrap導航