Bootstrap學習之路（2）---導航組件

在bootstrap中，導航條的樣式都依賴於.nav類，而樣式又分為多種，如：

標簽頁的樣式為：.nav-tabs

<ul class="nav nav-tabs">
          <li class="active"><a href="http://www.weixh.net">微笑話</a></li>
          <li><a href="#">圖文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

這是一個最簡單的標簽樣式的導航，li標簽中的active則是當前頁的狀態，運行效果如下：

膠囊式的標簽頁則只需把.nav-tabs類換成.nav-pills類即可，運行效果如下：

當然，膠囊是標簽頁也是可以垂直方向堆疊排列的。只需添加 .nav-stacked 類。

<ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="http://www.weixh.net">微笑話</a></li>
          <li><a href="#">圖文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

運行效果如下：

兩端對齊的標簽頁：

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

<div class="container-fluid">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a href="http://www.weixh.net">微笑話</a></li>
          <li><a href="#">圖文</a></li>
          <li><a href="#">文字</a></li>
        </ul>
    </div>

運行效果如下：

屏幕大於768px時

說明一下，第三個選項卡是鼠標經過的樣式，這些都是可以重寫的，現在說的只是入門。

當屏幕變小時，則自動變成堆疊的樣式，是不是瞬間覺得很高大上了呢？

 

默認樣式的導航條：

導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。

當瀏覽器視口（viewport）的寬度小於 @grid-float-breakpoint 值時，導航條內部的元素變為折疊排列，也就是變現為移動設備展現模式；當瀏覽器視口（viewport）的寬度大於 @grid-float-breakpoint 值時，導航條內部的元素變為水平排列，也就是變現為非移動設備展現模式。通過調整源碼中的這個值，就可以控制導航條何時堆疊排列，何時水平排列。默認值是 768px （小屏幕 -- 或者說是平板 --的最小值，或者說是平板）。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.weixh.net"><img src="images/waplogo.png" alt="微笑話" />微笑話</a>
        </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav nav-pills">
           <li class="active"><a href="http://www.weixh.net">全部</a></li>
                <li><a href="#">圖文</a></li>
                <li><a href="#">文字</a></li>
                </ul>
          </div>
        </nav>

解釋：

此響應式導航條依賴折疊（collapse）插件,你所使用的 Bootstrap 版本中應該包含此插件。
.navbar-default類是導航的默認樣式，也可以重新定義自己樣式加進去；

.navbar-fixed-top是導航固定到頂部為了增強可訪問性，務必給每個導航條加上 屬性。

依賴 JavaScript

如果 JavaScript 被禁用，並且視口（viewport）足夠窄，致使導航條折疊起來，導航條將不能被打開.navbar-collapse內所包含的內容也將不可見。

class="navbar-toggle collapsed"是折疊的樣式，data-target="#bs-example-navbar-collapse-1"是指折疊的目標；

運行效果如下：

當窗口夠大時，導航平鋪開來：

當屏幕變小時，導航自動折疊，顯示導航開關：

點擊開關，打開折疊的導航：

是不是覺得很方便呢？先啰嗦到這吧，如果覺得還不錯的話，麻煩點個贊，如果有什么說不到位的地方，歡迎回復批評指正。大家也可以到我最近瞎搞的笑話網站去看看笑話什么的：www.weixh.net，下次說列表組件。