bootstrap 導(dǎo)航條

一、默認(rèn)的導(dǎo)航條

制作默認(rèn)的導(dǎo)航條，可分以下幾步：

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

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

1 <nav class="navbar navbar-default">2         <ul class="nav navbar-nav">3             <li class="active"><a href="#">吃飯</a></li>4             <li><a href="#">睡覺</a></li>5             <li><a href="#">打勇士</a></li>6         </ul>7 </nav>

如圖下：

So easy吧qaq

二、帶有表單的導(dǎo)航條

1.在默認(rèn)導(dǎo)航條的基礎(chǔ)上，再一個form。

2.form中應(yīng)用樣式（form class="navbar-form"）

 1 <nav class="navbar navbar-default"> 2         <ul class="nav navbar-nav"> 3             <li class="active"><a href="#">吃飯</a></li> 4             <li><a href="#">睡覺</a></li> 5             <li><a href="#">打勇士</a></li> 6         </ul> 7         <form class="navbar-form"> 8             <input type="text" class="form-control" placeholder="猜猜是誰？"> 9             10             <input type="submit" class="form-control" value="我瞧瞧~">11         </form>12 </nav>

如圖下：

擦，寫錯了，其實(shí)我想寫打火箭的。。。

三、表單，下拉菜單等冗合的導(dǎo)航條

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

 1 <nav class="navbar navbar-default"> 2         <ul class="nav navbar-nav"> 3             <li class="active"><a href="#">吃飯</a></li> 4             <li><a href="#">睡覺</a></li> 5             <li><a href="#">打勇士</a></li> 6             <li class="dropdown"> 7               <a href="##" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a> 8               <ul class="dropdown-menu"> 9                 <li><a href="##">4:0</a></li>10                 <li><a href="##">4:1</a></li>11                 <li class="disabled"><a href="##">4:2</a></li>12               </ul>13             </li>14         </ul>15         <form class="navbar-form">16             <input type="text" class="form-control" placeholder="猜猜是誰？">17             18             <input type="submit" class="form-control" value="我瞧瞧~">19         </form>20 </nav>

如圖下：

咳咳，一般導(dǎo)航都有個大標(biāo)題，如圖下：

實(shí)現(xiàn)步驟：

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

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

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

 1 <nav class="navbar navbar-default"> 2         <div class="navbar-header"> 3             <a href="#" class="navbar-brand">阿爾德里奇</a> 4         </div> 5         <ul class="nav navbar-nav"> 6             <li class="active"><a href="#">吃飯</a></li> 7             <li><a href="#">睡覺</a></li> 8             <li><a href="#">打勇士</a></li> 9             <li class="dropdown">10               <a href="##" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>11               <ul class="dropdown-menu">12                 <li><a href="##">4:0</a></li>13                 <li><a href="##">4:1</a></li>14                 <li class="disabled"><a href="##">4:2</a></li>15               </ul>16             </li>17         </ul>18         <form class="navbar-form">19             <input type="text" class="form-control" placeholder="猜猜是誰？">20             21             <input type="submit" class="form-control" value="我瞧瞧~">22         </form>23 </nav>

四、反色導(dǎo)航條

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

個人還是比較喜歡這個風(fēng)格的，夠裝逼~

五、固定導(dǎo)航條

顧名思義，其實(shí)就是fixed樣式,

Bootstrap框架提供了兩種固定導(dǎo)航條的方式：

　　.navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部

　　.navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部

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

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

六、響應(yīng)式導(dǎo)航條

 1 <div class="navbar navbar-inverse navbar-fixed-top"> 2     <div class="container"> 3         <div class="navbar-header"> 4         　    <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即navbar-collapse collapse樣式所在元素，--> 5             <button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 6                 <span class="sr-only">Toggle Navigation</span> 7                 <span class="icon-bar"></span> 8                 <span class="icon-bar"></span> 9                 <span class="icon-bar"></span>10             </button>11             <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->12             <a href="#" class="navbar-brand">我的主頁</a>13         </div>14         <!-- 屏幕寬度小于768px時，div.navbar-collapse容器里的內(nèi)容都會隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時，再展開。屏幕大于768px時，默認(rèn)顯示。 -->15         <div id="navbar" class=" collapse navbar-collapse">16             <ul class="nav navbar-nav">17                 <li class="active"><a href="#">吃飯</a></li>18                 <li><a href="#">睡覺</a></li>19                 <li><a href="#">打火箭</a></li>20             </ul>21         </div>22     </div>23 </div>

我這是套的反色導(dǎo)航條的，現(xiàn)在分別看下寬屏和窄屏的顯示效果，如圖下：

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

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

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

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

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