Bootstrap導航

前面的話 　　導航對於一位前端人員來講並不陌生。能夠說導航是一個網站重要的元素組件之一，便於用戶查找網站所提供的各項功能服務。本文將詳細介紹Bootstrap導航
 
基礎樣式 　　Bootstrap框架中製做導航條主要經過「.nav」樣式。默認的「.nav」樣式不提供默認的導航樣式，必須附加另一個樣式纔會有效，好比「nav-tabs」、「nav-pills」之類
　　若是在使用導航組件實現導航條功能，務必在 

<ul>

 的最外側的邏輯父元素上添加 

role="navigation"

 屬性，或者用一個 

<nav>

 元素包裹整個導航組件。不要將 role 屬性添加到 

<ul>

 上，由於這樣能夠被輔助設備（殘疾人用的）上被識別爲一個真正的列表

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

 
轉載於猿2048:▷《Bootstrap導航》