下拉菜單

在使用Bootstrap框架的下拉菜單時翘盖，必須調(diào)用Bootstrap框架提供的bootstrap.js文件来屠。當(dāng)然疏尿，如果你使用的是未編譯版本淋淀，在js文件夾下你能找到一個名為“dropdown.js”的文件遥昧。你也可以調(diào)用這個js文件。不過在我們的教程中朵纷，我們統(tǒng)一調(diào)用壓縮好的“bootstrap.min.js”文件：

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

特別聲明：因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件炭臭，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。

1袍辞、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素鞋仍，示例中為:

<div class="dropdown"></div>

2、使用了一個<button>按鈕做為父菜單搅吁，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性威创，且值必須和最外容器類名一致，此示例為:

data-toggle="dropdown"

3谎懦、下拉菜單項使用一個ul列表肚豺，并且定義一個類名為“dropdown-menu”，此示例為:

<ul class="dropdown-menu">

 <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
</ul>
</div> 

在Bootstrap框架中的下拉菜單還提供了下拉分隔線界拦，假設(shè)下拉菜單有兩個組吸申，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能享甸。

上一小節(jié)講解通過添加“divider”可以將下拉菜單分組截碴，為了讓這個分組更明顯，還可以給每個組添加一個頭部（標(biāo)題）蛉威。如下：

<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

下拉菜單項除了上面兩種狀態(tài)日丹，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。這兩種狀態(tài)使用方法只需要在對應(yīng)的菜單項上添加對應(yīng)的類名：

<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

按鈕

按鈕組和下拉菜單組件一樣瓷翻，需要依賴于button.js插件才能正常運行聚凹。不過我們同樣可以直接只調(diào)用bootstrap.js文件。因為這個文件已集成了button.js插件功能齐帚。

對于結(jié)構(gòu)方面妒牙，非常的簡單。使用一個名為“btn-group”的容器对妄，把多個按鈕放到這個容器中湘今。如下所示：

<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

很多時候，我們常把下拉菜單和普通的按鈕組排列在一起剪菱，實現(xiàn)類似于導(dǎo)航菜單的效果摩瞎。

使用的時候拴签，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級旗们。如下所示：

<div class="btn-group">
<button class="btnbtn-default" type="button">首頁</button>
<button class="btnbtn-default" type="button">產(chǎn)品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯(lián)系我們</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button>
<ul class="dropdown-menu">
     <li><a href="##">公司簡介</a></li>
     <li><a href="##">企業(yè)文化</a></li>
     <li><a href="##">組織結(jié)構(gòu)</a></li>
     <li><a href="##">客服服務(wù)</a></li>
</ul>

導(dǎo)航

標(biāo)簽型tab導(dǎo)航

Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式蚓哩。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個樣式才會有效上渴，比如“nav-tabs”岸梨、“nav-pills”之類。比如右側(cè)代碼編輯器中就有一個tab導(dǎo)航條的例子稠氮，他的實現(xiàn)方法就是為ul標(biāo)簽加入.nav和nav-tabs兩個類樣式曹阔。

<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li> //顯示為當(dāng)前標(biāo)簽

膠囊型導(dǎo)航

<ul class="nav nav-pills">

導(dǎo)航（垂直堆疊的導(dǎo)航）

<ul class="nav nav-pills nav-stacked">

Paste_Image.png

自適應(yīng)導(dǎo)航

在制作自適應(yīng)導(dǎo)航時更換了一個類名“nav-justified”。當(dāng)然他需要和“nav-tabs”或者“nav-pills”配合在一起使用隔披。如：

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

面包屑導(dǎo)航

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">我的書</a></li>
  <li class="active">《圖解CSS3》</li>
</ol>

Paste_Image.png

導(dǎo)航條

基礎(chǔ)導(dǎo)航條

使用方法：

在制作一個基礎(chǔ)導(dǎo)航條時赃份，主要分以下幾步：

第一步：首先在制作導(dǎo)航的列表<ul class=”nav”>基礎(chǔ)上添加類名“navbar-nav”

第二步：在列表外部添加一個容器（div），并且使用類名“navbar”和“navbar-default”奢米。

<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
        <li class="active"><a href="##">網(wǎng)站首頁</a>    </li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名師介紹</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">關(guān)于我們</a></li>
     </ul>
</div>

原理分析：
而導(dǎo)航條的顏色都是通過“.navbar-default”來進行控制抓韩。

帶標(biāo)題的導(dǎo)航欄

在Web頁面制作中，常常在菜單前面都會有一個標(biāo)題（文字字號比其它文字稍大一些）鬓长，其實在Bootstrap框架也為大家做了這方面考慮园蝠，其通過“navbar-header”和“navbar-brand”來實現(xiàn)。

此功能主要起一個提醒功能痢士，當(dāng)然改良一下可以當(dāng)作是logo(此處不做過多闡述)。其樣式主要是加大了字體設(shè)置茂装，并且設(shè)置了最大寬度怠蹂。

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕課網(wǎng)</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">網(wǎng)站首頁</a></li>
   <li><a href="##">系列教程</a></li>
   <li><a href="##">名師介紹</a></li>
   <li><a href="##">成功案例</a></li>
   <li><a href="##">關(guān)于我們</a></li>
 </ul>

</div>

帶搜索表單的導(dǎo)航條

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕課網(wǎng)</a>
</div>
<ul class="nav navbar-nav">
   <li class="active"><a href="##">網(wǎng)站首頁</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="##">CSS3</a></li>
        <li><a href="##">JavaScript</a></li>
        <li class="disabled"><a href="##">PHP</a></li>
      </ul>
  </li>
  <li><a href="##">名師介紹</a></li>
  <li><a href="##">成功案例</a></li>
  <li><a href="##">關(guān)于我們</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
    <div class="form-group">
       <input type="text" class="form-control" placeholder="請輸入關(guān)鍵詞" />
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

固定導(dǎo)航條

很多情況之一，設(shè)計師希望導(dǎo)航條固定在瀏覽器頂部或底部少态，這種固定式導(dǎo)航條的應(yīng)用在移動端開發(fā)中更為常見城侧。Bootstrap框架提供了兩種固定導(dǎo)航條的方式：

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

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
…
</div>

實現(xiàn)原理很簡單彼妻，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性嫌佑，并且設(shè)置navbar-fixed-top的top值為0,而navbar-fixed-bottom的bottom值為0。

存在bug及解決方法:

從運行效果中大家不難發(fā)現(xiàn)侨歉，頁面主內(nèi)容頂部和底部都被固定導(dǎo)航條給遮住了屋摇。為了避免固定導(dǎo)航條遮蓋內(nèi)容，我們需要在body上做一些處理：

body {
  padding-top: 70px;/*有頂部固定導(dǎo)航條時設(shè)置*/
  padding-bottom: 70px;/*有底部固定導(dǎo)航條時設(shè)置*/
}

因為固定導(dǎo)航條默認(rèn)高度是50px幽邓，我們一般設(shè)置padding-top和padding-bottom的值為70px炮温，當(dāng)然有的時候還是需要具體情況具體分析。

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

使用方法：

1牵舵、保證在窄屏?xí)r需要折疊的內(nèi)容必須包裹在帶一個div內(nèi)柒啤，并且為這個div加入collapse倦挂、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名担巩。

2方援、保證在窄屏?xí)r要顯示的圖標(biāo)樣式（固定寫法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

3、并為button添加data-target=".類名/#id名"涛癌，究競是類名還是id名呢犯戏？由需要折疊的div來決定。

http://www.imooc.com/code/3124

分頁導(dǎo)航

在Bootstrap框架中使用的是ul>li>a這樣的結(jié)構(gòu)祖很，在ul標(biāo)簽上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

Paste_Image.png

翻頁導(dǎo)航

在實際使用中笛丙，翻頁分頁導(dǎo)航和帶頁碼的分頁導(dǎo)航類似，為ul標(biāo)簽加入pager類：

<ul class="pager">
   <li><a href="#">&laquo;上一頁</a></li>
   <li><a href="#">下一頁&raquo;</a></li>
</ul>

對齊樣式設(shè)置：

默認(rèn)情況之下假颇，翻頁分頁導(dǎo)航是居中顯示胚鸯，但有的時候我們需要一個居左，一個居右笨鸡。Bootstrap框架提供了兩個樣式：

? previous：讓“上一步”按鈕居左

? next：讓“下一步”按鈕居右

具體使用的時候姜钳，只需要在li標(biāo)簽上添加對應(yīng)類名即可：

<ul class="pager">
<li class="previous"><a href="#">&laquo;上一頁</a></li>
<li class="next"><a href="#">下一頁&raquo;</a></li>
</ul>

徽章

Paste_Image.png

使用方法：

使用方法，其實也沒什么太多可說的形耗，你可以像標(biāo)簽一樣哥桥，使用span標(biāo)簽來制作，然后為他加入badge類：

    <li class="active"><a href="##">網(wǎng)站首頁</a></li>
    <li><a href="##">系列教程</a></li>
    <li><a href="##">名師介紹</a></li>
    <li><a href="##">成功案例<span class="badge">23</span></a></li>
    <li><a href="##">關(guān)于我們</a></li>