bootstrap5如何使用下拉菜单

在 Bootstrap 5 中，下拉菜单的使用方法与 Bootstrap 4 类似。下面是一个简单的例子：

1. HTML 代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

2. 解释：

- `dropdown` 类是必须的，用于标识一个下拉菜单。
- `dropdown-toggle` 类是必须的，用于标识一个触发下拉菜单的按钮。
- `data-bs-toggle="dropdown"` 属性是必须的，用于指示该按钮触发的是一个下拉菜单。
- `aria-expanded="false"` 属性是必须的，用于指示该下拉菜单当前是否展开。
- `dropdown-menu` 类是必须的，用于标识一个下拉菜单的内容。
- `aria-labelledby="dropdownMenuButton"` 属性是必须的，用于指示该下拉菜单的按钮是谁。

在上述例子中，点击按钮后会展开一个下拉菜单，其中包含三个选项。当用户选择其中一个选项时，下拉菜单会自动关闭。

希望这个例子能够帮助你理解 Bootstrap 5 下拉菜单的使用方法。