Bootstrap5 下拉菜单学习笔记

Bootstrap 是一款流行的前端框架，其中下拉菜单是其常用的组件之一。使用 Bootstrap 5，我们可以轻松地创建下拉菜单并自定义样式。

创建基本下拉菜单

使用以下代码创建一个基本的下拉菜单：

htmlCopy Code
<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>

这段代码创建了一个按钮，当用户点击它时，会显示一个包含三个菜单项的下拉菜单。我们可以通过修改 button 元素的文本和 li 元素的链接来自定义菜单项。

自定义下拉菜单样式

Bootstrap 5 提供了多种样式和选项，以便自定义下拉菜单的外观和功能。例如，我们可以添加分组和分割线，或者设置菜单项的禁用状态。

带分组的下拉菜单

htmlCopy Code
<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><hr class="dropdown-divider"></li>
    <li class="dropdown-header">分组 1</li>
    <li><a class="dropdown-item" href="#">菜单项 3</a></li>
    <li><a class="dropdown-item" href="#">菜单项 4</a></li>
    <li><hr class="dropdown-divider"></li>
    <li class="dropdown-header">分组 2</li>
    <li><a class="dropdown-item" href="#">菜单项 5</a></li>
    <li><a class="dropdown-item" href="#">菜单项 6</a></li>
  </ul>
</div>

这段代码创建了一个带有分组的下拉菜单。我们使用 hr 元素添加分割线，使用 dropdown-header 类添加分组标题。

禁用菜单项

htmlCopy Code
<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><hr class="dropdown-divider"></li>
    <li class="dropdown-header">分组 1</li>
    <li><a class="dropdown-item" href="#">菜单项 3</a></li>
    <li><a class="dropdown-item" href="#">菜单项 4</a></li>
    <li><hr class="dropdown-divider"></li>
    <li class="dropdown-header">分组 2</li>
    <li><a class="dropdown-item" href="#">菜单项 5</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">菜单项 6 （禁用）</a></li>
  </ul>
</div>

这段代码创建了一个包含禁用菜单项的下拉菜单。我们使用 disabled 类将一个菜单项设为禁用状态，并通过 tabindex="-1" 和 aria-disabled="true" 属性来禁止用户使用键盘或辅助设备选择该菜单项。

结论

Bootstrap 5 提供了强大而灵活的下拉菜单组件，使我们可以轻松地创建和自定义各种类型的下拉菜单。通过掌握这些基本知识，我们可以快速构建高质量的网站和应用程序。