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-toggle="dropdown" 屬性的按鈕或鏈接。

將 .dropdown-menu 類添加到 <div> 元素，可實際構建下拉菜單。然后將 .dropdown-item 類添加到下拉菜單中的每個元素（鏈接或按鈕）。

下拉列表分隔線

.dropdown-divider 類用于通過水平細邊框分隔下拉菜單中的鏈接：

實例

<li><hr class="dropdown-divider"></hr></li>

親自試一試

下拉列表標題

.dropdown-header 類用于在下拉菜單中添加標題：

實例

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

親自試一試

禁用的和活動的項目

請使用 .active 類突出顯示特定的下拉項（添加藍色背景色）。

如需禁用下拉列表中的某個項目，請使用 .disabled 類（在懸停時獲得淺灰色文本顏色和 "no-parking-sign" 圖標）。

實例

<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 類添加到下拉元素，來創建 "dropend" 或 "dropstart" 菜單。請注意，插入符號/箭頭是自動添加的：

Dropright

<div class="dropdown dropend">

親自試一試

Dropleft

<div class="dropdown dropstart">

親自試一試

下拉列表右對齊

如需右對齊下拉菜單，請將 .dropdown-menu-end 類添加到帶有 .dropdown-menu 的元素：

實例

<div class="dropdown-menu dropdown-menu-end">

親自試一試

上拉列表

如果您希望下拉菜單向上展開而不是向下展開，請將 class="dropdown" 的 <div> 元素更改為 "dropup"：

實例

<div class="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">華為</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</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">華為</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">手機</a></li>
      <li><a class="dropdown-item" href="#">平板電腦</a></li>
    </ul>
  </div>
</div>

親自試一試