Bootstrap 4 下拉選單
基本下拉選單
下拉選單是一個可切換的選單，允許使用者從預定義列表中選擇一個值
示例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉按鈕
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">連結 1</a>
<a class="dropdown-item" href="#">連結 2</a>
<a class="dropdown-item" href="#">連結 3</a>
</div>
</div>
自己動手試一試 »
示例解釋
`.dropdown` 類表示一個下拉選單。
要開啟下拉選單，請使用類為 `.dropdown-toggle` 並帶有 `data-toggle="dropdown"` 屬性的按鈕或連結。
新增 `.dropdown-menu` 類到一個 `<div>` 元素來實際構建下拉選單。然後在下拉選單中的每個元素（連結或按鈕）上新增 `.dropdown-item` 類。
下拉分隔線
`.dropdown-divider` 類用於在下拉選單中的連結之間新增一個細的水平邊框
下拉標題
`.dropdown-header` 類用於在下拉選單中新增標題
停用和啟用項
使用 `.active` 類高亮顯示特定的下拉項（新增藍色背景色）。
要停用下拉選單中的一項，請使用 `.disabled` 類（滑鼠懸停時顯示淺灰色文字顏色和“禁止通行”圖示）。
示例
<a class="dropdown-item active" href="#">啟用</a>
<a class="dropdown-item disabled" href="#">停用</a>
自己動手試一試 »
下拉選單位置
您還可以透過向下拉元素新增 `.dropright` 或 `.dropleft` 類來建立“右拉”或“左拉”選單。請注意，箭頭會自動新增。
下拉選單靠右
要使下拉選單右對齊，請將 `.dropdown-menu` 元素新增 `.dropdown-menu-right` 類。
下拉選單
如果您希望下拉菜單向上展開而不是向下展開，請將類為 `"dropdown"` 的 `<div>` 元素更改為 `"dropup"`。
下拉文字
`.dropdown-item-text` 類用於向下拉選單項新增純文字，或用於連結以實現預設連結樣式。
示例
<div class="dropdown-menu">
<a class="dropdown-item" href="#">連結 1</a>
<a class="dropdown-item" href="#">連結 2</a>
<a class="dropdown-item-text" href="#">文字連結</a>
<span class="dropdown-item-text">純文字</span>
</div>
自己動手試一試 »
分組按鈕帶下拉選單
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板電腦</a>
<a class="dropdown-item" href="#">智慧手機</a>
</div>
</div>
</div>
自己動手試一試 »
拆分按鈕下拉選單
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">主色</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">連結 1</a>
<a class="dropdown-item" href="#">連結 2</a>
</div>
</div>
自己動手試一試 »
垂直按鈕組帶下拉選單
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板電腦</a>
<a class="dropdown-item" href="#">智慧手機</a>
</div>
</div>
</div>
自己動手試一試 »
完整的 Bootstrap 4 下拉選單參考
有關所有下拉選單選項、方法和事件的完整參考，請參閱我們的 Bootstrap 4 JS 下拉選單參考。
