Bootstrap5中的Dropdowns（下拉菜单）组件

在 Bootstrap 5 中，下拉菜单（Dropdowns）是一种常用的用户界面组件，它允许用户通过点击或触摸一个按钮或链接来显示一个包含多个选项的列表。这些选项可以是链接、按钮或者其他可交互的元素。当用户点击或触摸列表外的区域时，下拉菜单通常会自动关闭。

HTML 结构

<!-- 下拉菜单的触发按钮 -->
<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>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">另一个操作</a></li>
</ul>

在这个示例中：

• btn 和 btn-secondary 类用于创建按钮，并为其添加样式。
• dropdown-toggle 类表示这是一个用于触发下拉菜单的按钮。
• data-bs-toggle="dropdown" 属性告诉 Bootstrap 这个按钮用于控制一个下拉菜单。
• aria-expanded="false" 属性提供可访问性信息，指示下拉菜单当前是否展开。
• dropdown-menu 类用于创建下拉菜单的列表。
• aria-labelledby="dropdownMenuButton" 属性关联下拉菜单与其触发按钮，以提供可访问性支持。
• dropdown-item 类用于下拉菜单中的每个可点击的项。
• dropdown-divider 类用于在下拉菜单中添加一个分隔线。

下拉菜单的方向

你可以通过添加 data-bs-offset 属性或者使用 dropdown-menu-start 和 dropdown-menu-end 类来改变下拉菜单的显示方向。

<!-- 下拉菜单显示在左边 -->
<ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdownMenuButton">
  <!-- 菜单项 -->
</ul>

<!-- 下拉菜单显示在右边 -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
  <!-- 菜单项 -->
</ul>

下拉菜单的分隔符

使用 <hr class="dropdown-divider"> 可以在下拉菜单中添加分隔符，以区分不同的选项组。

下拉菜单的头部和页脚

你还可以在下拉菜单中添加头部和页脚，使用 dropdown-header 类即可。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><h6 class="dropdown-header">下拉菜单标题</h6></li>
  <li><a class="dropdown-item" href="#">操作 1</a></li>
  <!-- 更多菜单项 -->
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">下拉菜单的另一个标题</h6></li>
  <li><a class="dropdown-item" href="#">另一个操作</a></li>
</ul>

注意事项

确保在引入 Bootstrap 的 CSS 和 JavaScript 文件后，你的下拉菜单代码才会正常工作。