1. 概述
下拉菜單使用頻率也是比較高的，比較常見的使用場景是在導航菜單欄，某個主菜單含有下拉的子菜單。
Bootstrap為下拉菜單提供了兩種實現方式，即普通的下拉菜單還有按鈕式的下拉菜單。我們先看一張圖觀察下，從圖中可以看出，普通下拉菜單和按鈕式下拉菜單的樣式基本相同，唯一比較明顯的區別是：普通下拉菜單相當於菜單，前后自動換行；而按鈕式的下拉菜單相當於按鈕，前后不換行。
2. 下拉菜單
2.1 普通下拉菜單
先來看下普通下拉菜單的示例代碼，通過dropdown描述一個下拉菜單，下拉菜單的主按鈕通過dropdown-toggle類描述，下拉子菜單的部分是dropdown-menu類描述的ul元素。最后注意下拉箭頭是通過caret樣式類實現的。
普通下拉菜單：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 效果如下：
2.2 更換顏色
其實就是更換按鈕的樣式類，如下代碼將默認按鈕改為了首選按鈕btn-primary。
更換顏色:
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 效果如下：
2.3 更換尺寸
其實就是通過btn-lg或btn-sm更換按鈕的尺寸。
更換尺寸:
<div class="dropdown"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 效果如下：
2.4 添加分割線
可以在子菜單之間添加分割線，示例代碼：
添加分割線：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li role="separator" class="divider"></li> <li><a href="#">命令2</a></li> </ul> </div> 效果如下：
2.5 菜單分組
如果子菜單較多，還可以進行分組：
菜單分組：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">分組1</li> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> <li class="dropdown-header">分組2</li> <li><a href="#">命令3</a></li> <li><a href="#">命令4</a></li> </ul> </div> 效果如下：
2.6 上拉菜單
這個實現比較奇葩，可以讓子菜單彈出方向改變，真實使用場景我都沒見過。只需要將dropdown樣式類改為dropup即可。
上拉菜單：
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 
3. 按鈕式下拉菜單
按鈕式下拉菜單的實現，只需要將之前的dropdown樣式類改為btn-group即可，有個例外是上拉菜單，需要將dropup改為btn-group和dropup兩個樣式類。
具體代碼如下：
<div class="col-md-12"> 按鈕式下拉菜單： <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 更換顏色: <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">命令1</a></li> <li><a href="#">命令2</a></li> </ul> </div> 更換尺寸: <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 下發命令