1、下拉菜單：
在使用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">
2、下拉菜單分割線：
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那麼組與組之間可以通過添加一個空的<li>，並且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能。
3、爲有分割線的下拉菜單添加分組名：
<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>
4、對齊方式：
Bootstrap框架中下拉菜單默認是左對齊，如果你想讓下拉菜單相對於父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名，如下所示
與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認效果。
5、菜單項狀態：
下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）：
下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。
這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名：
6、按鈕組：
按鈕組和下拉菜單組件一樣，需要依賴於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>
7、按鈕工具欄：
（1）Bootstrap框架按鈕工具欄只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中。
（2）按鈕組大小設置 ：按鈕組的大小，我們也可以通過類似的方法：
☑ .btn-group-lg:大按鈕組
☑ .btn-group-sm:小按鈕組
☑ .btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。
8、按鈕（嵌套分組）：
把下拉菜單和普通的按鈕組排列在一起，實現類似於導航菜單的效果。
使用的時候，只需要把當初製作下拉菜單的“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>
9、按鈕垂直分組：
在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>
10、等分按鈕：
等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“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>
11、按鈕下拉菜單：
按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是一樣的。
不同的是在普通的下拉菜單的基礎上封裝了按鈕（.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>
12、按鈕的向上向下三角形：
按鈕的向下三角形，我們是通過在<button>標籤中添加一個“<span>”標籤元素，並且命名爲“caret”:
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
有的時候我們的下拉菜單會向上彈起，這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“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>
13、導航：
（1）基礎樣式：
Bootstrap框架中製作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式纔會有效，比如“nav-tabs”、“nav-pills”之類
（2）標籤型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>
在Bootstrap框架中想讓“Home”項爲當前選中項，只需要在其標籤上添加類名“class="active"”即可：
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
除了當前項之外，有的選項卡還帶有禁用狀態，只需要在標籤項上添加“class="disabled"”即可
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
（3）膠囊型導航：
膠囊形（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>
（4）垂直堆疊的導航：
除了水平導航之外，還有垂直導航。製作垂直堆疊導航只需要在“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>
在垂直堆疊導航也可以添加分隔線，只需要添加在導航項之間添加“<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>
（5）自適應導航：
自適應導航指的是導航佔據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。
自適應導航和前面使用“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>
（6）二級導航（導航+下拉菜單）：
在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>
只需要添加“<li class=”nav-divider”></li>”這樣的一個空標籤就可以添加分隔線。
（7）麪包屑導航：
麪包屑(Breadcrumb)一般用於導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">我的書</a></li>
<li class="active">《圖解CSS3》</li>
</ol>