Bootstrap 5 下拉選單
基本下拉選單
下拉選單是一個可切換的選單，允許使用者從預定義列表中選擇一個值
示例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉按鈕
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">連結 1</a></li>
<li><a class="dropdown-item" href="#">連結 2</a></li>
<li><a class="dropdown-item" href="#">連結 3</a></li>
</ul>
</div>
自己動手試一試 »
示例解釋
`.dropdown` 類表示一個下拉選單。
要開啟下拉選單，請使用帶有類名 .dropdown-toggle 和屬性 data-bs-toggle="dropdown" 的按鈕或連結。
為容器元素（如 <div> 或 <ul>）新增 .dropdown-menu 類來構建下拉選單。然後在下拉選單中的每個元素（連結或按鈕）上新增 .dropdown-item 類。
下拉分隔線
.dropdown-divider 類用於在下拉選單中的連結之間新增細水平邊框。
下拉標題
`.dropdown-header` 類用於在下拉選單中新增標題
停用和啟用項
使用 .active 類高亮顯示特定的下拉選單項（新增藍色背景色）。
要停用下拉選單中的一項，請使用 `.disabled` 類（滑鼠懸停時顯示淺灰色文字顏色和“禁止通行”圖示）。
示例
<li><a class="dropdown-item" href="#">普通</a></li>
<li><a class="dropdown-item active" href="#">活動</a></li>
<li><a class="dropdown-item disabled" href="#">停用</a></li>
自己動手試一試 »
下拉選單位置
您還可以透過向下拉選單元素新增 .dropend 或 .dropstart 類來建立“右側下拉”或“左側下拉”選單。注意，插入符號/箭頭是自動新增的。
右對齊下拉選單
要使下拉選單右對齊，請向 .dropdown-menu 元素新增 .dropdown-menu-end 類。
下拉選單
如果您希望下拉菜單向上展開而不是向下展開，請將類為 `"dropdown"` 的 `<div>` 元素更改為 `"dropup"`。
下拉文字
.dropdown-item-text 類用於向下拉選單項新增純文字，或用於具有預設連結樣式的連結。
示例
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">連結 1</a></li>
<li><a class="dropdown-item" href="#">連結 2</a></li>
<li><a class="dropdown-item" href="#">連結 3</a></li>
<li><a class="dropdown-item-text" href="#">文字連結</a></li>
<li><span class="dropdown-item-text">純文字</span></li>
</ul>
自己動手試一試 »
分組按鈕，帶下拉選單
示例
<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-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">平板電腦</a></li>
<li><a class="dropdown-item" href="#">智慧手機</a></li>
</ul>
</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-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">平板電腦</a></li>
<li><a class="dropdown-item" href="#">智慧手機</a></li>
</ul>
</div>
</div>
自己動手試一試 »
