下拉菜單（基本用法）

小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根據不同的版本，它對應的文件：

  ?  LESS版本：對應的源碼文件為 dropdowns.less

  ?  Sass版本：對應的源碼文件為 _dropdowns.sCSS

  ?  編譯后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行

在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件。當然，如果你使用的是未編譯版本，在js文件夾下你能找到一個名為“dropdown.js”的文件。你也可以調用這個js文件。不過在我們的教程中，我們統一調用壓縮好的“bootstrap.min.js”文件：

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
特別聲明：因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。
我們先來看官網上一個簡單的示例：
<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" class="divider"></li>   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
使用方法：
在使用Bootstrap框架中的下拉菜單組件時，其結構運用的正確與否非常的重要，如果結構和類名未使用正確，直接影響組件是否能正常運用。我們來簡單的看看：
1、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素，示例中為:
<div class="dropdown"></div>
2、使用了一個<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:
data-toggle="dropdown"
3、下拉菜單項使用一個ul列表，并且定義一個類名為“dropdown-menu”，此示例為:
<ul class="dropdown-menu">
下拉菜單（原理分析）
Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，如下所示：
因為“dropdown-menu”默認樣式設置了“display:none”，其詳細源碼請查看bootstrap.css文件第3010行～第3029行：
.dropdown-menu {  position: absolute;/*設置絕對定位，相對于父元素div.dropdown*/  top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設置相對定位，該元素相對于body元素*/  left: 0;  z-index: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/  display: none;/*默認隱藏下拉菜單項*/  float: left;  min-width: 160px;  padding: 5px 0;  margin: 2px 0 0;  font-size: 14px;  list-style: none;  background-color: #fff;  background-clip: padding-box;  border: 1px solid #ccc;  border: 1px solid rgba(0, 0, 0, .15);  border-radius: 4px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}
當用戶點擊父菜單項時，下拉菜單將會被顯示出來，如下所示：
當用戶再次點擊時，下拉菜單將繼續隱藏，如下所示：
原理分析：
現在我們來分析一下實現原理，非常簡單，通過js技術手段，給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說，默認情況，“div.dropdown”沒有類名“open”，當用戶第一次點擊時，“div.dropdown”會添加類名“open”；當用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除。我們可以通過瀏覽器的firebug查看整個過程：
默認情況：
用戶第一次點擊：
用戶再次點擊：
在bootstrap.css文件第3076行～第3078行，我們可以很容易發現：
.open > .dropdown-menu {  display: block;}
下拉菜單（下拉分隔線）
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能。對應的樣式代碼：添加如下代碼即可實現分割線：<li role="presentation" class="divider"></li>
/*源碼bootstrap.css文件第3034行～第3039行*/
.dropdown-menu .divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}
效果如下：
在代碼編輯器中輸入代碼，實現為下拉菜單添加條分隔線效果，效果如下圖：
示例代碼：
<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>    <li role="presentation" class="divider"></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>    <li role="presentation" class="divider"></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> 1、<span class="caret"></span>這句話就是下拉框右邊那個小三角。
2、bootstrap 通過不同的class實現不同類型的控件。比如使用特定class的div和button就組合形成下拉列表，而不像其它語言的有單獨的下拉列表控件。
3、對于在Firefox上，提交代碼后，點擊下拉菜單沒有效果的，在地址欄中輸入about:config，將security.csp.enable 設置為false， 重啟瀏覽器。
4、引用jquery時，用jquery.min.js。
點擊下拉菜單里的選項然后顯示到那個按鈕上面，比如說默認是Action，然后點一下Another action，按鈕上就顯示Another action
$(function() {    $(".dropdown-menu li a").bind("click", function() {        var $this = $(this);        var $a = $this.parent().parent().prev()        $a.text($this.text());        $a.append("<span class='caret'>");    });});
下拉菜單（菜單標題）
上一小節講解通過添加“divider”可以將下拉菜單分組，為了讓這個分組更明顯，還可以給每個組添加一個頭部（標題）。如下：
<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" class="dropdown-header">第一部分菜單頭部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>…<li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜單頭部</li>…<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
對應的樣式如下：
/*查看bootstrap.css文件第3090行～第3096行*/
.dropdown-header {  display: block;  padding: 3px 20px;  font-size: 12px;  line-height: 1.42857143;  color: #999;}
運行效果如下：
編寫代碼完成下拉菜單，效果如下圖：
編寫代碼完成下拉菜單，效果如下圖：
代碼：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>菜單標題</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body><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" class="dropdown-header">水果</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>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>    <li role="presentation" class="divider"></li>    <li role="presentation" class="dropdown-header">蔬菜</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>    <li role="presentation" class="divider"></li>    <li role="presentation" class="dropdown-header">主食</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>   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>
下拉菜單（對齊方式）
實現右對齊方法：
Bootstrap框架中下拉菜單默認是左對齊，如果你想讓下拉菜單相對于父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名
如下所示：
<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 pull-right" role="menu" aria-labelledby="dropdownMenu1">   …  </ul></div>
上面代碼中的“pull-right”類可以用“dropdown-menu-right”代替，兩個類的作用是一樣的，可從下面的源代碼中看出。
實現原理：
對應的樣式如下：
/*源碼請查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/
.dropdown-menu.pull-right {  right: 0;  left: auto;}.dropdown-menu-right {  right: 0;  left: auto;}
同時一定要為.dropdown添加float:leftcss樣式。
.dropdown{  float: left;}
運行效果如下所示：
下拉菜單與父容器左邊對齊:
與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認效果。
/*請查看bootstrap.css文件第3086行～第3089行*/
.dropdown-menu-left {  right: auto;  left: 0;}
下拉菜單（菜單項狀態）
下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）：
/*查看bootstrap.css文件第3049行～第3054行*/
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus {  color: #262626;  text-decoration: none;  background-color: #f5f5f5;}
下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名：
<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" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>    ….    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>  </ul></div>
運行效果如下：
對應的樣式代碼也非常簡單：
/*請查看bootstrap.css文件第3055行～第3075行*/
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus {  color: #fff;  text-decoration: none;  background-color: #428bca;  outline: 0;}.dropdown-menu > .disabled > a,.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  color: #999;}.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  text-decoration: none;  cursor: not-allowed;  background-color: transparent;  background-image: none;  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}示例代碼：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>菜單項狀態</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><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" class="active"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃</a></li>  </ul></div>   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>
按鈕（按鈕組）
單個按鈕在Web頁面中的運用有時候并不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標按鈕等。那么在這一節中，我們主要向大家介紹Bootstrap框架為大家提供的按鈕組組件。
源碼查詢：
按鈕組也是一個獨立的組件，所以可以找到對應的源碼文件：
  ?  LESS版本：對應的源文件為buttons.less
  ?  Sass版本：對應的源文件為_buttons.scss
  ?  CSS版本：對應bootstrap.css文件第3131行～第3291行
使用方法：
按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運行。不過我們同樣可以直接只調用bootstrap.js文件。因為這個文件已集成了button.js插件功能。
對于結構方面，非常的簡單。使用一個名為“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-step-forward"></span>  </button></div>
運行效果如下所示：
除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽。唯一要保證的是：不管使用什么標簽，“.btn-group”容器里的標簽元素需要帶有類名“.btn”。
按鈕組實現源碼如下：
/*查看bootstrap.css文件第3131行～第3161行*/
.btn-group,.btn-group-vertical {  position: relative;  display: inline-block;  vertical-align: middle;}.btn-group > .btn,.btn-group-vertical > .btn {  position: relative;  float: left;}.btn-group > .btn:hover,.btn-group-vertical > .btn:hover,.btn-group > .btn:focus,.btn-group-vertical > .btn:focus,.btn-group > .btn:active,.btn-group-vertical > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn.active {  z-index: 2;}.btn-group > .btn:focus,.btn-group-vertical > .btn:focus {  outline: none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group {   margin-left: -1px;}
從效果圖上我們可以看出，按鈕組四個角都是圓角（支持CSS3的瀏覽器），但有的小伙伴會問，我們平常制作網頁時每個按鈕都是帶有圓角，而在按鈕組中的按鈕，除了第一個和最后一個具有邊上的圓角之外，其他的按鈕沒有圓角，其實實現方法非常簡單：
  1、默認所有按鈕都有圓角
  2、除第一個按鈕和最后一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
  3、第一個按鈕只留左上角和左下角是圓角
  4、最后一個按鈕只留右上角和右下角是圓角
對應的源碼如下：
/*查看bootstrap.css文件第3174行～第3203行*/
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {  border-radius: 0;}.btn-group > .btn:first-child {  margin-left: 0;}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}.btn-group > .btn-group {  float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {  border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}每個按鈕都由這樣一條語句構成：
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span></button>
其中第一行class定義按鈕的類別，第二行定義按鈕的圖標種類。
實現如下形狀的按鈕組
代碼為：
<div class="btn-group">    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button></div>
按鈕（按鈕工具欄）
在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組，如下圖所示：
那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，如下所示：
<div class="btn-toolbar">  <div class="btn-group">    …  </div>  <div class="btn-group">    …  </div>  <div class="btn-group">    …  </div>  <div class="btn-group">    …  </div></div>
實現原理主要是讓容器的多個分組“btn-group”元素進行浮動，并且組與組之前保持5px的左外距。代碼如下：
/*源碼請查閱bootstrap.css文件第3162行～第3173行*/
.btn-toolbar {  margin-left: -5px;}.btn-toolbar .btn-group,.btn-toolbar .input-group {  float: left;}.btn-toolbar > .btn,.btn-toolbar > .btn-group,.btn-toolbar > .input-group {  margin-left: 5px;}
注意在”btn-toolbar”上清除浮動。
/*源碼請查閱bootstrap.css文件第5062行*/
.btn-toolbar:before,.btn-toolbar:after｛　display: table;content: " ";｝.btn-toolbar:after{  clear: both;}
運行效果如下：
按鈕組大小設置
在介紹按鈕一節中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：
  ?  .btn-group-lg:大按鈕組
  ?  .btn-group-sm:小按鈕組
  ?  .btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。如下所示：
<div class="btn-toolbar">  <div class="btn-group btn-group-lg">    …  </div>  <div class="btn-group">    …  </div>  <div class="btn-group btn-group-sm">    …  </div>  <div class="btn-group btn-group-xs">   …  </div></div>
運行效果如下所示：
實現上圖效果樣式代碼如下：
/*源碼請查閱bootstrap.css文件第2320行～第2340行*/
.btn-lg,.btn-group-lg> .btn{  padding: 10px 16px;  font-size: 18px;  line-height: 1.33;  border-radius: 6px;}.btn-sm,.btn-group-sm> .btn {  padding: 5px 10px;  font-size: 12px;  line-height: 1.5;  border-radius: 3px;}.btn-xs,.btn-group-xs> .btn{  padding: 1px 5px;  font-size: 12px;  line-height: 1.5;  border-radius: 3px;}
按鈕（嵌套分組）
很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現類似于導航菜單的效果。如下所示：
使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。如下所示：
<div class="btn-group"><button class="btnbtn-default" type="button">首頁</button><button class="btnbtn-default" type="button">產品展示</button><button class="btnbtn-default" type="button">案例分析</button><button class="btnbtn-default" type="button">聯系我們</button><div class="btn-group">   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關于我們<span class="caret"></span></button>   <ul class="dropdown-menu">         <li><a href="##">公司簡介</a></li>         <li><a href="##">企業文化</a></li>         <li><a href="##">組織結構</a></li>         <li><a href="##">客服服務</a></li>    </ul></div></div>
實現的樣式代碼：
/*查看bootstrap.css文件第3192行～第3223行*/
.btn-group > .btn-group {  float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {  border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {  outline: 0;}.btn-group > .btn + .dropdown-toggle {  padding-right: 8px;  padding-left: 8px;}.btn-group > .btn-lg + .dropdown-toggle {  padding-right: 12px;  padding-left: 12px;}.btn-group.open .dropdown-toggle {  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}.btn-group.open .dropdown-toggle.btn-link {  -webkit-box-shadow: none;  box-shadow: none;}
按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。如下所示：
<div class="btn-group-vertical"><button class="btnbtn-default" type="button">首頁</button><button class="btnbtn-default" type="button">產品展示</button><button class="btnbtn-default" type="button">案例分析</button><button class="btnbtn-default" type="button">聯系我們</button><div class="btn-group">   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關于我們<span class="caret"></span></button>   <ul class="dropdown-menu">      <li><a href="##">公司簡介</a></li>      <li><a href="##">企業文化</a></li>      <li><a href="##">組織結構</a></li>      <li><a href="##">客服服務</a></li></ul></div></div>
運行的效果如下：
實現垂直分組的樣式代碼：
/*請查看bootstrap.css文件第3234行～第3276行*/
.btn-group-vertical > .btn,.btn-group-vertical > .btn-group,.btn-group-vertical > .btn-group > .btn {  display: block;  float: none;  width: 100%;  max-width: 100%;}.btn-group-vertical > .btn-group > .btn {  float: none;}.btn-group-vertical > .btn + .btn,.btn-group-vertical > .btn + .btn-group,.btn-group-vertical > .btn-group + .btn,.btn-group-vertical > .btn-group + .btn-group {  margin-top: -1px;  margin-left: 0;}.btn-group-vertical > .btn:not(:first-child):not(:last-child) {  border-radius: 0;}.btn-group-vertical > .btn:first-child:not(:last-child) {  border-top-right-radius: 4px;  border-bottom-right-radius: 0;  border-bottom-left-radius: 0;}.btn-group-vertical > .btn:last-child:not(:first-child) {  border-top-left-radius: 0;  border-top-right-radius: 0;  border-bottom-left-radius: 4px;}.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {  border-radius: 0;}.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {  border-bottom-right-radius: 0;  border-bottom-left-radius: 0;}.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {  border-top-left-radius: 0;  border-top-right-radius: 0;}
和水平分組按鈕不一樣的是：
  ?  水平分組按鈕第一個按鈕左上角和左下角具有圓角以及最后一個按鈕右上角和右下角具有圓角
  ?  垂直分組按鈕第一個按鈕左上角和右上角具有圓角以及最后一個按鈕左下角和右下角具有圓角
按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：
<div class="btn-wrap"><div class="btn-group btn-group-justified">  <a class="btnbtn-default" href="#">首頁</a>  <a class="btnbtn-default" href="#">產品展示</a>  <a class="btnbtn-default" href="#">案例分析</a>  <a class="btnbtn-default" href="#">聯系我們</a></div></div>
運行效果如下：
實現原理非常簡單，把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）。具體樣式代碼如下：
/*源碼請查看bootstrap.css文件第3277行～第3291行*/
.btn-group-justified {  display: table;  width: 100%;  table-layout: fixed;  border-collapse: separate;}.btn-group-justified > .btn,.btn-group-justified > .btn-group {  display: table-cell;  float: none;  width: 1%;}.btn-group-justified > .btn-group .btn {  width: 100%;}
特別聲明：在制作等分按鈕組時，請盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好。
按鈕下拉菜單
按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是一樣的。不同的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。
按鈕下拉菜單其實就是普通的下拉菜單，只不過把“<a>”標簽元素換成了“<button>”標簽元素。唯一不同的是外部容器“div.dropdown”換成了“div.btn-group”。如下所示：
<div class="btn-group">      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>      <ul class="dropdown-menu">          <li><a href="##">按鈕下拉菜單項</a></li>          <li><a href="##">按鈕下拉菜單項</a></li>          <li><a href="##">按鈕下拉菜單項</a></li>          <li><a href="##">按鈕下拉菜單項</a></li>      </ul></div>
實現樣式代碼如下：
/*查看bootstrap.css文件第3204行～第3223行*/
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {  outline: 0;}.btn-group > .btn + .dropdown-toggle {  padding-right: 8px;  padding-left: 8px;}.btn-group > .btn-lg + .dropdown-toggle {  padding-right: 12px;  padding-left: 12px;}.btn-group.open .dropdown-toggle {  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}.btn-group.open .dropdown-toggle.btn-link {  -webkit-box-shadow: none;          box-shadow: none;}
運行的效果如下：
按鈕的向下向上三角形
按鈕的向下三角形，我們是通過在<button>標簽中添加一個“<span>”標簽元素，并且命名為“caret”:
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
這個三角形完全是通過CSS代碼來實現的：
/*源碼請查看bootstrap.css文件第2994行～第3003行*/
.caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;}
另外在按鈕中的三角形“caret”做了一定的樣式處理：
/*源碼查看bootstrap.css文件第3224行～第3233行*/
.btn .caret {  margin-left: 0;}.btn-lg .caret {  border-width: 5px 5px 0;  border-bottom-width: 0;}.dropup .btn-lg .caret {  border-width: 0 5px 5px;}
有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。
/*源碼請查看bootstrap.css文件第3109行～第3114行*/
.dropup .caret,.navbar-fixed-bottom .dropdown .caret {  content: "";  border-top: 0;  border-bottom: 4px solid;}
上面代碼中可以看出，向上三角與向下三角的區別：其實就是改變了一個border-bottom的值。
下面是向上彈起菜單的例子：
<div class="btn-group dropup">  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>  <ul class="dropdown-menu">        <li><a href="##">按鈕下拉菜單項</a></li>        <li><a href="##">按鈕下拉菜單項</a></li>        <li><a href="##">按鈕下拉菜單項</a></li>        <li><a href="##">按鈕下拉菜單項</a></li>  </ul></div>
運行效果如下：
向上彈起的下拉菜單
有些菜單是需要向上彈出的，比如說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，為了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門為這種效果提代了一個類名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加這個類名（當然，如果是普通向上彈出下拉菜單，你只需要在“dropdown”類名基礎上追加“dropup”類名即可）。
<div class="btn-group dropup">    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>    <ul class="dropdown-menu">         <li><a href="##">按鈕下拉菜單項</a></li>         <li><a href="##">按鈕下拉菜單項</a></li>         <li><a href="##">按鈕下拉菜單項</a></li>         <li><a href="##">按鈕下拉菜單項</a></li>    </ul></div>
運行的效果如下：
/*源碼請查閱bootstrap.css文件第3115行～第3120行*/
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {  top: auto;  bottom: 100%;  margin-bottom: 1px;}
從上面的例子中可以看出，實現方法為：主要將“dropdown-menu”的top值變成了auto，而把bottom值換成了100%：
“向上彈起的下拉菜單”,效果圖如下：
核心代碼：
<div class="btn-group" dropup>        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>        <ul class="dropdown-menu">            <li><a href="##">按鈕下拉菜單</a></li>            <li><a href="##">按鈕下拉菜單</a></li>            <li><a href="##">按鈕下拉菜單</a></li>            <li><a href="##">按鈕下拉菜單</a></li>        </ul>    </div>
導航（基礎樣式）
導航對于一位前端人員來說并不陌生?？梢哉f導航是一個網站重要的元素組件之一，可以便于用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在這一節中將向大家介紹如何使用Bootstrap框架制作各式各樣的導航。
在Bootstrap框架將導航獨立出來成為一個導航組件，根據不同的版本，可以找到對應的源碼：
   ? LESS版本：對應的源文件是navs.less
   ? Sass版本：對應的源文件是_navs.scss
   ? 編譯后版本：對應源碼是bootstrap.css文件第3450行～第3641行
導航基礎樣式
Bootstrap框架中制作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是為ul標簽加入.nav和nav-tabs兩個類樣式。
/*源碼請查閱bootstrap.css文件第3450行~第3493行*/
.nav {  padding-left: 0;  margin-bottom: 0;  list-style: none;}.nav> li {  position: relative;  display: block;}.nav> li > a {  position: relative;  display: block;  padding: 10px 15px;}.nav> li >a:hover,.nav> li >a:focus {  text-decoration: none;  background-color: #eee;}.nav>li.disabled> a {  color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus {  color: #999;  text-decoration: none;  cursor: not-allowed;  background-color: transparent;}.nav .open > a,.nav .open >a:hover,.nav .open >a:focus {  background-color: #eee;  border-color: #428bca;}.nav .nav-divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}.nav> li > a >img {  max-width: none;}
導航（標簽形tab導航）
標簽形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。
標簽形導航是通過“nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“nav”上追加此類名，如：
<ul class="nav nav-tabs">     <li><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>
運行的效果如下所示：
實現原理非常的簡單，將菜單項（li）按塊顯示，并且讓他們在同一水平上排列，然后定義非高亮菜單的樣式和鼠標懸浮效果。代碼如下：
/*源碼請查閱bootstrap.css文件第3494行～第3509行*/
.nav-tabs {border-bottom: 1px solid #ddd;}.nav-tabs > li {float: left;margin-bottom: -1px;}.nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;}.nav-tabs > li >a:hover {border-color: #eee #eee #ddd;}
其實上例的效果和我們平時看到的選項卡效果并不一致。一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class="active"”即可：
<ul class="nav nav-tabs">    <li class="active"><a href="##">Home</a></li>    …</ul>
運行效果如下：
對應樣式代碼如下：
/*源碼請查閱bootstrap.css文件第3510行～第3518行*/
.nav-tabs >li.active> a,.nav-tabs >li.active>a:hover,.nav-tabs >li.active>a:focus {  color: #555;  cursor: default;  background-color: #fff;  border: 1px solid #ddd;  border-bottom-color: transparent;}
除了當前項之外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需要在標簽項上添加“class="disabled"”即可：
<ul class="nav nav-tabs">     <li class="active"><a href="##">Home</a></li>     …     <li class="disabled"><a href="##">Responsive</a></li></ul>
運行效果如下：
實現這個效果的樣式，在默認樣式“.nav”中就帶有：
/*源碼請查看bootstrap.css文件第3469行～第3478行*/
.nav>li.disabled> a {  color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus {  color: #999;  text-decoration: none;  cursor: not-allowed;  background-color: transparent;}
注意：我們看到的選項卡效果，點擊菜單項就可以切換內容，如果要實現這樣的效果需要配合js插件，這部分將在后面的教程中會介紹。
導航（膠囊形(pills)導航）
膠囊形（pills）導航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，并帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可：
<ul class="nav nav-pills">      <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 class="disabled"><a href="##">Responsive</a></li></ul>
實現效果樣式代碼：
/*源碼請查閱bootstrap.css文件第3563行～第3577行*/
.nav-pills > li {  float: left;}.nav-pills > li > a {  border-radius: 4px;}.nav-pills > li + li {  margin-left: 2px;}.nav-pills >li.active> a,.nav-pills >li.active>a:hover,.nav-pills >li.active>a:focus {color: #fff;  background-color: #428bca;}
導航（垂直堆疊的導航）
在實際運用當中，除了水平導航之外，還有垂直導航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導航只需要在“nav-pills”的基礎上添加一個“nav-stacked”類名即可：
<ul class="nav nav-pills nav-stacked">     <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 class="disabled"><a href="##">Responsive</a></li></ul>
運行效果如下：
垂直堆疊導航與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，然后給相鄰導航項留有一定的間距：
/*源碼請查閱bootstrap.css文件第3578行～第3584行*/
.nav-stacked > li {  float: none;}.nav-stacked > li + li {  margin-top: 2px;  margin-left: 0;}
大家是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具有這樣的效果，只需要添加在導航項之間添加“<li class=”nav-divider”></li>”即可：
<ul class="nav nav-pills nav-stacked">    <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 class="nav-divider"></li>    <li class="disabled"><a href="##">Responsive</a></li></ul>
運行效果如下：
實現樣式：
/*源碼請查閱bootstrap.css文件第3485行～3490行*/
.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}
或許你會問，如果我在”nav-tabs”上添加“nav-stacked”是不是也能實現垂直的標簽選項導航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本將這個效果取消了，可能作者覺得垂直選擇項并不太常見，也不美觀吧。
自適應導航（使用）
自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”制作的自適應按鈕組是一樣的。只不過在制作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“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>
運行效果如下：(可單擊全屏查看)
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>自適應導航</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body><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><br /><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>
自適應導航（實現原理）
實現原理并不難，列表（<ul>）上設置寬度為“100%”，然后每個菜單項(<li>)設置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示：
/*源碼請查閱bootstrap.css文件第3585行～第3607行*/
.nav-justified {  width: 100%;}.nav-justified > li {  float: none;}.nav-justified > li > a {  margin-bottom: 5px;  text-align: center;}.nav-justified > .dropdown .dropdown-menu {  top: auto;  left: auto;}@media (min-width: 768px) {  .nav-justified > li {  display: table-cell;  width: 1%;  }  .nav-justified > li > a {  margin-bottom: 0;  }}
這里有一個媒體查詢條件：“@media (min-width:768px){…}”表示自適應導航僅在瀏覽器視窗寬度大于768px才能按上圖風格顯示。當你的瀏覽器視窗寬度小于768px的時候，將會按下圖的風格展示：
注：在最右側代碼窗口中設置全屏可以切換效果。
從上圖效果可以得知，“nav-tabs”和“nav-justified”配合在一起使用，也就是自適應選項卡導航，瀏覽器視窗寬度小于768px時，在樣式上做了另外的處理。
/*源碼請查閱bootstrap.css文件第3519行～第3562行*/
.nav-tabs.nav-justified { width: 100%; border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: 1%;  }.nav-tabs.nav-justified > li > a { margin-bottom: 0;  }}.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px;}.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0;  }.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border-bottom-color: #fff;  }}
導航加下拉菜單（二級導航）
前面介紹的都是使用Bootstrap框架制作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那么在Bootstrap框架中制作二級導航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：
<ul class="nav nav-pills">     <li class="active"><a href="##">首頁</a></li>     <li class="dropdown">        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>        <ul class="dropdown-menu">            <li><a href="##">CSS3</a></li>            …       </ul>     </li>     <li><a href="##">關于我們</a></li></ul>
運行效果如下：
通過瀏覽器調試工具，不難發現，點擊有二級導航的菜單項，會自動添加“open”類名，再次點擊就會刪除添加的“open”類名：
簡單點來說，就是依靠這個類名來控制二級導航顯示與否，并且設置了背景色和邊框：
/*源碼查看bootstrap.css文件第3479行～3484行*/
.nav .open > a,.nav .open >a:hover,.nav .open >a:focus {background-color: #eee;border-color: #428bca;}
大家回憶一下，在制作下拉菜單時，可以用分隔線，那么在二級導航中是否可以呢？我們一起來看看：
不用再說太多，只需要添加“<li class=”nav-divider”></li>”這樣的一個空標簽就可以實現分割符。
運行效果如下：
/*源碼請查看bootstrap.css文件第3485行～第3490行*/
.nav .nav-divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}
面包屑式導航
面包屑(Breadcrumb)一般用于導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件：
LESS版本：對應源文件breadcrumbs.lessSass版本：對應源文件_breadcrumbs.scss編譯出來的版本：源碼對應bootstrap.css文件第4112行～第4129行
使用方法：
使用方式就很簡單，為ol加入breadcrumb類：
<ol class="breadcrumb">  <li><a href="#">首頁</a></li>  <li><a href="#">我的書</a></li>  <li class="active">《圖解CSS3》</li></ol>
實現原理：
看來不錯吧！作者是使用li+li:before實現li與li之間的分隔符，所以這種方案在IE低版本就慘了（不支持）。
/*源碼查看bootstrap.css文件第4112行～第4129行*/
.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}.breadcrumb> li + li:before {padding: 0 5px;color: #ccc;content: "//00a0";}.breadcrumb> .active {color: #999;}