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

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

在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，下次說列表組件。

Bootstrap官網上的左側導航的效果是什組件

 
bootstrap導航怎讓他不隨頁面變小而縮起來？

然後設定css樣式單獨模組內容地區，這樣就可以覆蓋自舉式