bootstrap 導航條

一、默認的導航條

制作默認的導航條，可分以下幾步：

1.在ul里加上（ul class="nav navbar-nav"）樣式；

2.在ul外加一層div或nav(ps:HTML5新屬性)，並且添加樣式（div class="navbar nabar-default"）;

<nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">吃飯</a></li>
            <li><a href="#">睡覺</a></li>
            <li><a href="#">打勇士</a></li>
        </ul>
</nav>

如圖下：

So easy吧qaq

二、帶有表單的導航條

1.在默認導航條的基礎上，再一個form。

2.form中應用樣式（form class="navbar-form"）

<nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">吃飯</a></li>
            <li><a href="#">睡覺</a></li>
            <li><a href="#">打勇士</a></li>
        </ul>
        <form class="navbar-form">
            <input type="text" class="form-control" placeholder="猜猜是誰？">
            
            <input type="submit" class="form-control" value="我瞧瞧~">
        </form>
</nav>

如圖下：

擦，寫錯了，其實我想寫打火箭的。。。

三、表單，下拉菜單等冗合的導航條

上一個綜合例子，不然一個一個寫，小編得coding到天亮，廢話少說，直說上料。

<nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">吃飯</a></li>
            <li><a href="#">睡覺</a></li>
            <li><a href="#">打勇士</a></li>
            <li class="dropdown">
              <a href="##" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="##">4:0</a></li>
                <li><a href="##">4:1</a></li>
                <li class="disabled"><a href="##">4:2</a></li>
              </ul>
            </li>
        </ul>
        <form class="navbar-form">
            <input type="text" class="form-control" placeholder="猜猜是誰？">
            
            <input type="submit" class="form-control" value="我瞧瞧~">
        </form>
</nav>

如圖下：

咳咳，一般導航都有個大標題，如圖下：

 

實現步驟：

1.在div里添加樣式（div class="navbar-header"）；

2.在此div添加a標簽(a class="navbar-brand")；

navbar-brand(品牌)也就是大標題啦！

<nav class="navbar navbar-default">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">阿爾德里奇</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">吃飯</a></li>
            <li><a href="#">睡覺</a></li>
            <li><a href="#">打勇士</a></li>
            <li class="dropdown">
              <a href="##" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="##">4:0</a></li>
                <li><a href="##">4:1</a></li>
                <li class="disabled"><a href="##">4:2</a></li>
              </ul>
            </li>
        </ul>
        <form class="navbar-form">
            <input type="text" class="form-control" placeholder="猜猜是誰？">
            
            <input type="submit" class="form-control" value="我瞧瞧~">
        </form>
</nav>

四、反色導航條

反色導航條其實是Bootstrap框架為大家提供的第二種風格的導航條，只是將"navbar-deafult"類名換成"navbar-inverse"。其他不變，見下圖：

個人還是比較喜歡這個風格的，夠裝逼~

五、固定導航條

顧名思義，其實就是fixed樣式,

Bootstrap框架提供了兩種固定導航條的方式：

　　.navbar-fixed-top：導航條固定在瀏覽器窗口頂部

　　.navbar-fixed-bottom：導航條固定在瀏覽器窗口底部

使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可

<!--導航條固定在瀏覽器窗口頂部-->
<div class="navbar navbar-default navbar-fixed-top">
  　…
</div>
<!--導航條固定在瀏覽器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
  　…
</div>

六、響應式導航條

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        　    <!-- .navbar-toggle樣式用於toggle收縮的內容，即navbar-collapse collapse樣式所在元素，-->
            <button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
            <a href="#" class="navbar-brand">我的主頁</a>
        </div>
        <!-- 屏幕寬度小於768px時，div.navbar-collapse容器里的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->
        <div id="navbar" class=" collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">吃飯</a></li>
                <li><a href="#">睡覺</a></li>
                <li><a href="#">打火箭</a></li>
            </ul>
        </div>
    </div>
</div>

我這是套的反色導航條的，現在分別看下寬屏和窄屏的顯示效果，如圖下：

<button>里面是窄屏右上角的按鈕，span標簽是三道杠，

現在說一下上面代碼中第5行，data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"，這都什么跟什么啊，我這逐一介紹一下；

data-toggle="collapse"     代表     告訴js要什么事件來觸發,此處的coolapse為“伸展折疊”；

data-target="#navbar"     代表     誰要以伸展折疊的方式來展示，綁定的是ID；

aria-expanded="false"      代表     是否展開，false。

談到這aria-*，為無障礙網頁應用。主要針對的是視覺缺陷，失聰，行動不便的殘疾人以及假裝殘疾的測試人員。尤其像盲人，眼睛看不到，其瀏覽網頁則需要借助輔助設備，如屏幕閱讀器，屏幕閱讀機可以大聲朗讀或者輸出盲文。相關文檔：WAI-ARIA無障礙網頁應用屬性完全展示。

歡樂的時光如此短暫，好了，今天就到這里了，覺得不錯麻煩點個贊，danielwu的前端之路有你相陪，咱們下期再見！