bootstrap如何觸發下拉式選單

下拉選單（基本用法）

小夥伴們注意，在Bootstrap框架中的下拉式選單元件是一個獨立的元件，根據不同的版本，它對應的檔案：

☑ LESS版本：對應的原始碼檔案為dropdowns.less

☑ Sass版本：對應的原始碼檔案為_dropdowns .sass

☑ 編譯後的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入門教學》

使用方法：

在使用Bootstrap框架中的下拉式選單元件時，其結構運用的正確與否非常的重要，如果結構和類別名稱未使用正確，直接影響元件是否能正常運用。讓我們來簡單的看看：

1、使用一個名為「dropdown」的容器包裹了整個下拉式選單元素，範例中為:

2、使用了一個按鈕做為父選單，並且定義類別名稱「dropdown-toggle」和自訂「data-toggle」屬性，且值必須和最外容器類別名稱一致，此範例為:

data-toggle="dropdown"

3、下拉選單項目使用ul列表，並定義一個類別名為“dropdown-menu”，此範例為:

<ul class="dropdown-menu">

範例

选择你喜欢的水果

• 苹果
• 香蕉
• 梨
• 桃

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

登入後複製