Bootstrap 下拉菜单（Dropdowns）

Bootstrap 的下拉菜单（Dropdowns）是其组件库中的一个交互式组件，用于在按钮、链接或其他元素上触发一个下拉列表，适合导航、选项选择等场景。Bootstrap 下拉菜单依赖其 CSS 和 JavaScript（通过 Popper.js 实现定位），提供美观、响应式且易于使用的下拉功能。以下是对 Bootstrap 下拉菜单的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

Bootstrap 下拉菜单示例

Bootstrap 下拉菜单示例

基本下拉菜单

下拉菜单

• 选项 1
• 选项 2
• 选项 3

带分隔线

带分隔线的菜单

• 选项 1
• 选项 2
• 其他选项

不同方向

向上展开

• 选项 1
• 选项 2

响应式对齐

响应式对齐

• 选项 1
• 选项 2

禁用和激活

激活项

• 激活选项
• 禁用选项
• 普通选项

---

1. Bootstrap 下拉菜单概述

Bootstrap 的下拉菜单通过按钮或其他触发元素显示一个可展开的选项列表。其主要特点包括：

• 交互性：通过点击或悬停（需自定义）展开菜单，依赖 Bootstrap 的 JavaScript 和 Popper.js。
• 响应式：支持不同屏幕尺寸的定位和对齐。
• 灵活性：可用于导航栏、按钮组、表单等场景。
• 可访问性：内置 ARIA 属性，确保屏幕阅读器支持。
• 可定制：通过 CSS 或 Sass 调整样式和行为。

下拉菜单通常由以下元素组成：

• 触发元素：如 <button> 或 <a>，使用 .dropdown-toggle 和 data-bs-toggle="dropdown"。
• 菜单容器：<ul> 或 <div>，使用 .dropdown-menu。
• 菜单项：<li> 内的 <a>，使用 .dropdown-item。

---

2. 核心下拉菜单类

以下是Bootstrap 下拉菜单的主要类和用法：

(1) 基本下拉菜单

使用 .dropdown 包裹触发元素和菜单，.dropdown-toggle 设置触发器，.dropdown-menu 定义菜单。

• 用法：

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
      <li><a class="dropdown-item" href="#">选项 2</a></li>
    </ul>
  </div>

• 必要属性：
• data-bs-toggle="dropdown"：启用下拉功能。
• aria-expanded="false"：指示菜单展开状态。

(2) 菜单项

• 普通项：.dropdown-item 用于菜单中的可点击项。
• 禁用项：添加 .disabled 或 aria-disabled="true"。
• 激活项：添加 .active 高亮显示。
• 用法：

  <ul class="dropdown-menu">
    <li><a class="dropdown-item active" href="#">激活选项</a></li>
    <li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
  </ul>

(3) 分隔线

使用 .dropdown-divider 添加水平分隔线。

• 用法：

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">选项 1</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">选项 2</a></li>
  </ul>

(4) 菜单标题

使用 .dropdown-header 添加不可点击的标题。

• 用法：

  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">标题</h6></li>
    <li><a class="dropdown-item" href="#">选项 1</a></li>
  </ul>

(5) 菜单方向

控制下拉菜单的展开方向：

• 向下（默认）：.dropdown-menu。
• 向上：.dropup。
• 向右：.dropend。
• 向左：.dropstart。
• 用法：

  <div class="dropup">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
      向上展开
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
    </ul>
  </div>

(6) 菜单对齐

调整菜单的对齐方式：

• 右对齐：.dropdown-menu-end。
• 左对齐：.dropdown-menu-start。
• 响应式对齐：.dropdown-menu-{breakpoint}-end（如 .dropdown-menu-md-end）。
• 用法：

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
      右对齐菜单
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
    </ul>
  </div>

(7) 菜单样式

• 深色菜单：.dropdown-menu-dark 创建深色背景菜单。
• 自定义宽度：使用 CSS 或工具类（如 .w-100）。
• 示例：

  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item" href="#">深色选项</a></li>
  </ul>

---

3. 与导航栏结合

下拉菜单常用于导航栏（Navbar）中：

• 用法：

  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">导航</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
              下拉
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">选项 1</a></li>
              <li><a class="dropdown-item" href="#">选项 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

---

4. JavaScript 行为

Bootstrap 下拉菜单依赖 bootstrap.bundle.min.js（包含 Popper.js）来实现交互：

• 触发方式：
• 默认：点击触发（通过 data-bs-toggle="dropdown"）。
• 悬停触发：需自定义 JavaScript 或 CSS（官方不推荐）。
• 事件监听：

  const dropdownElementList = document.querySelectorAll('.dropdown-toggle');
  dropdownElementList.forEach(dropdown => {
    dropdown.addEventListener('show.bs.dropdown', () => {
      console.log('下拉菜单展开');
    });
  });

---

5. 定制下拉菜单

Bootstrap 的下拉菜单样式基于 Sass 变量，可通过以下方式定制：

• 颜色：$dropdown-bg、$dropdown-link-color。
• 边框：$dropdown-border-color、$dropdown-border-radius。
• 间距：$dropdown-padding-y、$dropdown-item-padding-x。

定制示例：

// custom.scss
$dropdown-bg: #f8f9fa;
$dropdown-link-color: #007bff;
$dropdown-border-radius: 0.5rem;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

---

6. 注意事项

• JavaScript 依赖：确保引入 bootstrap.bundle.min.js 以支持下拉功能。
• 可访问性：为触发器添加 aria-expanded 和 aria-haspopup="true"，确保菜单项有清晰的 role 和 aria-* 属性。
• 定位问题：若菜单被容器裁剪，使用 .dropdown-menu-end 或 Popper.js 配置调整位置。
• 响应式测试：在小屏幕上测试菜单，确保展开方向和对齐合理。
• 性能：避免嵌套过多下拉菜单，保持 DOM 简洁。

---

7. 学习资源

• 官方文档：https://getbootstrap.com/docs/5.3/components/dropdowns/
• 中文教程：https://www.bootcss.com/（非官方）
• X 平台：搜索“Bootstrap 下拉菜单”或“Bootstrap Dropdowns”，查看社区分享的设计技巧。

如果你需要更详细的下拉菜单讲解（例如多级下拉、动态菜单）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！