在 Bootstrap 5 中，下拉菜单是一个非常常见的UI元素，用于在用户点击按钮或链接时显示一个菜单选项。Bootstrap 提供了非常方便的类来创建下拉菜单，并且支持多种方式来触发和显示菜单。

1. 基本下拉菜单

以下是一个简单的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
  </ul>
</div>
  • dropdown：这是包含下拉菜单的容器。
  • dropdown-toggle：定义了一个可以触发下拉菜单的按钮。
  • data-bs-toggle="dropdown"：使按钮触发下拉菜单显示。
  • dropdown-menu：下拉菜单的容器。
  • dropdown-item：菜单项的样式。

2. 下拉菜单的分隔符

如果你需要在下拉菜单中添加分隔线来区分不同的菜单项，可以使用 .dropdown-divider 类。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>
  • <hr class="dropdown-divider">：用来在菜单项之间插入分隔线。

3. 下拉菜单的对齐

Bootstrap 允许你使用 .dropdown-menu-end 类来将下拉菜单对齐到按钮的右侧（默认是左对齐）。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <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>
  </ul>
</div>
  • .dropdown-menu-end：将下拉菜单向右对齐。

4. 下拉菜单的启用和禁用

你可以通过添加 .disabled 类来禁用菜单项，禁用项无法点击。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled action</a></li>
  </ul>
</div>
  • .disabled：禁用菜单项。
  • tabindex="-1" 和 aria-disabled="true"：确保禁用项不可以被聚焦和选择。

5. 下拉菜单中的按钮

你还可以在下拉菜单中嵌套按钮，创建更复杂的菜单结构。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
      <button class="dropdown-item" type="button">Dropdown button</button>
    </li>
  </ul>
</div>
  • <button class="dropdown-item" type="button">：可以在下拉菜单中嵌套按钮。

6. 下拉菜单的多级菜单

如果你需要多级下拉菜单，可以嵌套多个 <ul> 元素。需要注意的是，Bootstrap 默认并不支持完全的多级下拉菜单，但你可以通过嵌套来实现这个效果。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
        <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
      </ul>
    </li>
  </ul>
</div>
  • dropdown-submenu：表示下拉菜单中的子菜单。

注意：虽然 Bootstrap 5 本身没有官方支持多级菜单，但你可以通过自定义 CSS 来处理子菜单的显示和隐藏。

7. 下拉菜单的自动关闭

Bootstrap 5 会默认在点击菜单外部时自动关闭下拉菜单。如果你想禁用这个行为，可以通过在按钮上添加 data-bs-auto-close="false" 来关闭自动关闭功能。

<div class="dropdown" data-bs-auto-close="false">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

总结

Bootstrap 5 提供了一种简单而强大的方法来创建下拉菜单。通过结合按钮、菜单项、分隔符、对齐方式以及禁用状态，你可以很容易地为网页添加下拉菜单。你也可以通过嵌套和自定义样式来扩展菜单的功能，例如实现多级下拉菜单或禁用自动关闭行为。