今天來介紹bootstrap元件---下拉式選單

bootstrap下拉式選單的code形式

一般要做下拉式選單的話除了html刻出外型之外，還要加上hover才能啟動，非常複雜
而bootstrap的下拉式選單形式是一個button、div加上a或者是button加上ul、li、a
按鈕的樣式可以參照bootstrap button的做法

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        menu
    </button>
    <div class="dropdown-menu">
         <a class="dropdown-item">項目1</a>
         <a class="dropdown-item">項目2</a>
         <a class="dropdown-item">項目3</a>
         <a class="dropdown-item">項目4</a>
     </div>
</div>

or

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item">項目1</a></li>
        <li><a class="dropdown-item">項目2</a></li>
        <li><a class="dropdown-item">項目3</a></li>
        <li><a class="dropdown-item">項目4</a></li>
    </ul>
</div>

屬性的解釋

class="dropdown"：指定這是一個下拉菜單。
class="btn btn-primary dropdown-toggle"：設置觸發下拉菜單的按鈕樣式。
id="dropdownMenuButton"：指定菜單的 ID，用於 aria-labelledby。
data-toggle="dropdown"：指定這是一個觸發下拉的元素。
aria-haspopup="true" 和 aria-expanded="false"：提供了可訪問性支持。

下拉選項

在div class="dropdown-menu" 或ul class="dropdown-menu" 元素中，你可以添加下拉選項，這些選項通常是a元素。

自訂樣式

按鈕樣式

按鈕的樣式在bootstrap元件---button中有介紹，可以完全照搬

分割按鈕

在選項中加上分割線

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

深色下拉選單

把選項部分的背景變成深色的

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

停用和啟用

幫選項預設狀態active和Disabled

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
        <li><a class="dropdown-item disabled">Disabled link</a></li>
        <li><a class="dropdown-item" href="#">Another link</a></li>
    </ul>
</div>