BootStrap 導航條執行個體代碼，bootstrap導航條

BootStrap 導航條執行個體代碼，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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>   <li class="dropdown">    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>    <ul class="dropdown-menu">    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">阿爾德裡奇</a>  </div>  <ul class="nav navbar-nav">   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>   <li class="dropdown">    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>    <ul class="dropdown-menu">    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺</a></li>    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打火箭</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-*，為無障礙網頁應用。主要針對的是視覺缺陷，失聰，行動不便的殘疾人以及假裝殘疾的測試人員。尤其像盲人，眼睛看不到，其瀏覽網頁則需要藉助輔助裝置，如螢幕助讀程式，螢幕閱讀機可以大聲朗讀或者輸出盲文。

以上所述是小編給大家介紹的BootStrap 導航條執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！