Bootstrap 下拉菜单

Bootstrap 下拉菜单 (Dropdowns)

基本下拉菜单 (Basic Dropdown)

下拉菜单（Dropdown）是一个可切换的菜单，允许用户从预定义列表中选择一个值。Bootstrap 5 使用 data 属性和预定义类使创建下拉菜单变得简单明了。

下拉菜单示例

HTML CSS JavaScript

关于我们

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Dropdown Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Example
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">HTML</a></li>
        <li><a class="dropdown-item" href="#">CSS</a></li>
        <li><a class="dropdown-item" href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

示例解释 (Example Explained)

.dropdown 类包裹了下拉菜单的触发元素和下拉菜单列表本身。

要打开下拉菜单，可以使用带有 data-bs-toggle="dropdown" 属性和 aria-expanded="false" 属性的按钮或链接。按钮上的 id 应该与 <ul> 上的 aria-labelledby 属性匹配，以确保可访问性。

Bootstrap 5 会自动为带有 .dropdown-toggle 类的按钮添加一个小箭头图标（caret arrow icon）。不需要单独的 .caret 类。

为 <ul> 元素添加 .dropdown-menu 类来构建下拉菜单列表。下拉菜单项通常是带有 .dropdown-item 类的 <a> 或 <button> 元素，嵌套在 <li> 标签内。

下拉菜单分隔线 (Dropdown Divider)

使用 <hr class="dropdown-divider"> 在下拉菜单中分隔相关的菜单项组：

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <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="#">Something else here</a></li>
  </ul>
</body>
</html>

下拉菜单标题 (Dropdown Header)

下拉菜单标题示例

Frameworks HTML CSS JavaScript

User Options Profile Settings

在任何下拉菜单中添加标题来标注操作分组。如果标题不使用 <li> 包裹，则使用 <li><h6 class="dropdown-header">Dropdown header</h6></li> 或直接使用 <h6 class="dropdown-header">Dropdown header</h6>。

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Frameworks</h6></li>
    <li><a class="dropdown-item" href="#">React</a></li>
    <li><a class="dropdown-item" href="#">Vue.js</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">User Options</h6></li>
    <li><a class="dropdown-item" href="#">Profile</a></li>
  </ul>
</body>
</html>

禁用项 (Disable an Item)

禁用下拉菜单项示例

HTML CSS (disabled) JavaScript

关于我们

要禁用下拉菜单中的某个项，给 .dropdown-item 添加 .disabled 类：

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">HTML</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">CSS (disabled)</a></li>
    <li><a class="dropdown-item" href="#">JavaScript</a></li>
  </ul>
</body>
</html>

下拉菜单对齐与位置 (Dropdown Alignment and Position)

右对齐下拉菜单示例 (Dropdown Right (End) Example)

HTML CSS JavaScript

关于我们

要右对齐下拉菜单，给带有 .dropdown-menu 的元素添加 .dropdown-menu-end 类。对于响应式对齐，你可以使用像 .dropdown-menu-lg-end 这样的类，仅在大屏幕及以上尺寸时右对齐。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Right-aligned menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><button class="dropdown-item" type="button">Action</button></li>
      <li><button class="dropdown-item" type="button">Another action</button></li>
    </ul>
  </div>
</body>
</html>

向上弹出菜单示例 (Dropup Example)

HTML CSS JavaScript

关于我们

如果你希望下拉菜单向上而不是向下弹出，请在父级 .dropdown 容器上添加 .dropup 类。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="dropdown dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropup
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
</body>
</html>

下拉菜单可访问性 (Dropdown Accessibility)

为了帮助提升可访问性，特别是对屏幕阅读器用户而言，请确保你的下拉菜单包含适当的 ARIA 属性。Bootstrap 5 的下拉菜单设计时已考虑到可访问性。主要属性包括：

• 切换按钮上的 aria-expanded，指示菜单是打开还是关闭。
• <ul> 菜单上的 aria-labelledby，引用切换按钮的 id。
• .dropdown-item 元素应该是可聚焦的（例如 <a> 或 <button>）。禁用的项应该具有 aria-disabled="true" 和 tabindex="-1"。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="accessibleDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        教程
      </button>
      <ul class="dropdown-menu" aria-labelledby="accessibleDropdownMenuButton">
        <li><a class="dropdown-item" href="#">HTML</a></li>
        <li><a class="dropdown-item" href="#">CSS</a></li>
        <li><a class="dropdown-item" href="#">JavaScript</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">About Us</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Bootstrap 下拉菜单完整参考 (Complete Bootstrap Dropdown Reference)

有关所有下拉菜单选项、方法和事件的全面参考，请查阅 Bootstrap 5 官方文档。