小伙伴們注意，在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">