Bootstrap 4 下拉菜单 - 创建交互式下拉列表

最后编辑于2025-04-14 13:24:10.4401164 +0800 CST

Bootstrap 4 下拉菜单

下拉菜单（Dropdown）是Bootstrap 4中常用的交互组件，用于在有限空间内显示多个链接或选项的列表。下拉菜单在导航栏、表单选择和更多操作按钮中应用广泛。

基本下拉菜单

创建一个基本的下拉菜单需要以下几个组件：

  1. 带有.dropdown类的容器
  2. 一个触发器（通常是按钮），带有data-toggle="dropdown"属性
  3. 带有.dropdown-menu类的菜单容器
  4. 带有.dropdown-item类的菜单项
html 
 1<div class="dropdown">
 2  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 3    下拉按钮
 4  </button>
 5  <div class="dropdown-menu">
 6    <a class="dropdown-item" href="#">链接 1</a>
 7    <a class="dropdown-item" href="#">链接 2</a>
 8    <a class="dropdown-item" href="#">链接 3</a>
 9  </div>
10</div>

不同类型的下拉菜单触发器

按钮下拉菜单

html 
 1<div class="dropdown">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 3    操作
 4  </button>
 5  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 6    <a class="dropdown-item" href="#">编辑</a>
 7    <a class="dropdown-item" href="#">复制</a>
 8    <a class="dropdown-item" href="#">删除</a>
 9  </div>
10</div>

链接下拉菜单

html 
 1<div class="dropdown">
 2  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 3    产品
 4  </a>
 5  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 6    <a class="dropdown-item" href="#">智能手机</a>
 7    <a class="dropdown-item" href="#">平板电脑</a>
 8    <a class="dropdown-item" href="#">笔记本电脑</a>
 9  </div>
10</div>

分割按钮下拉菜单

html 
 1<div class="btn-group">
 2  <button type="button" class="btn btn-primary">主要操作</button>
 3  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 4    <span class="sr-only">切换下拉菜单</span>
 5  </button>
 6  <div class="dropdown-menu">
 7    <a class="dropdown-item" href="#">操作 1</a>
 8    <a class="dropdown-item" href="#">操作 2</a>
 9    <a class="dropdown-item" href="#">操作 3</a>
10  </div>
11</div>

下拉菜单的结构与样式

菜单分割线

使用.dropdown-divider类可以在菜单项之间添加分割线：

html 
1<div class="dropdown-menu">
2  <a class="dropdown-item" href="#">个人资料</a>
3  <a class="dropdown-item" href="#">账户设置</a>
4  <div class="dropdown-divider"></div>
5  <a class="dropdown-item" href="#">退出登录</a>
6</div>

菜单标题

使用.dropdown-header类可以在下拉菜单中添加非交互式的标题：

html 
1<div class="dropdown-menu">
2  <h6 class="dropdown-header">用户菜单</h6>
3  <a class="dropdown-item" href="#">个人资料</a>
4  <a class="dropdown-item" href="#">账户设置</a>
5  <div class="dropdown-divider"></div>
6  <h6 class="dropdown-header">系统菜单</h6>
7  <a class="dropdown-item" href="#">帮助中心</a>
8  <a class="dropdown-item" href="#">退出登录</a>
9</div>

活动状态与禁用状态

  • 使用.active类可以高亮显示当前活动的菜单项
  • 使用.disabled类可以禁用某个菜单项
html 
1<div class="dropdown-menu">
2  <a class="dropdown-item active" href="#">当前页面</a>
3  <a class="dropdown-item" href="#">普通链接</a>
4  <a class="dropdown-item disabled" href="#">禁用选项</a>
5</div>

下拉菜单的定位

右对齐下拉菜单

默认情况下，下拉菜单左对齐。使用.dropdown-menu-right类可以让菜单右对齐：

html 
 1<div class="dropdown">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
 3    右对齐菜单
 4  </button>
 5  <div class="dropdown-menu dropdown-menu-right">
 6    <a class="dropdown-item" href="#">菜单项 1</a>
 7    <a class="dropdown-item" href="#">菜单项 2</a>
 8    <a class="dropdown-item" href="#">菜单项 3</a>
 9  </div>
10</div>

向上弹出的下拉菜单

如果您希望菜单向上展开，可以将.dropdown类替换为.dropup：

html 
 1<div class="dropup">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
 3    向上弹出菜单
 4  </button>
 5  <div class="dropdown-menu">
 6    <a class="dropdown-item" href="#">菜单项 1</a>
 7    <a class="dropdown-item" href="#">菜单项 2</a>
 8    <a class="dropdown-item" href="#">菜单项 3</a>
 9  </div>
10</div>

向右弹出的下拉菜单

Bootstrap 4还提供了.dropright类，使菜单向右展开：

html 
 1<div class="dropright">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
 3    向右弹出菜单
 4  </button>
 5  <div class="dropdown-menu">
 6    <a class="dropdown-item" href="#">菜单项 1</a>
 7    <a class="dropdown-item" href="#">菜单项 2</a>
 8    <a class="dropdown-item" href="#">菜单项 3</a>
 9  </div>
10</div>

向左弹出的下拉菜单

类似地，.dropleft类使菜单向左展开：

html 
 1<div class="dropleft">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
 3    向左弹出菜单
 4  </button>
 5  <div class="dropdown-menu">
 6    <a class="dropdown-item" href="#">菜单项 1</a>
 7    <a class="dropdown-item" href="#">菜单项 2</a>
 8    <a class="dropdown-item" href="#">菜单项 3</a>
 9  </div>
10</div>

高级功能

菜单中的表单

下拉菜单可以包含表单元素：

html 
 1<div class="dropdown">
 2  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
 3    表单菜单
 4  </button>
 5  <div class="dropdown-menu p-3">
 6    <form>
 7      <div class="form-group">
 8        <label for="exampleDropdownFormEmail">邮箱地址</label>
 9        <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
10      </div>
11      <div class="form-group">
12        <label for="exampleDropdownFormPassword">密码</label>
13        <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="密码">
14      </div>
15      <div class="form-check">
16        <input type="checkbox" class="form-check-input" id="dropdownCheck">
17        <label class="form-check-label" for="dropdownCheck">记住我</label>
18      </div>
19      <button type="submit" class="btn btn-primary mt-2">登录</button>
20    </form>
21  </div>
22</div>

带自定义内容的下拉菜单

下拉菜单可以包含任何HTML内容，不仅限于链接：

html 
1<div class="dropdown">
2  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
3    自定义内容
4  </button>
5  <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
6    <p>一些示例文本，展示了下拉菜单中可以包含各种内容。</p>
7    <p class="mb-0">您可以放置任何HTML元素。</p>
8  </div>
9</div>

使用JavaScript控制下拉菜单

Bootstrap的下拉菜单可以通过JavaScript方法控制：

javascript 
 1// 显示下拉菜单
 2$('#myDropdown').dropdown('show');
 3
 4// 隐藏下拉菜单
 5$('#myDropdown').dropdown('hide');
 6
 7// 切换下拉菜单的显示状态
 8$('#myDropdown').dropdown('toggle');
 9
10// 更新下拉菜单的位置
11$('#myDropdown').dropdown('update');

下拉菜单事件

Bootstrap的下拉菜单提供了多个事件，可用于在不同阶段执行代码：

javascript 
 1// 下拉菜单显示前触发
 2$('#myDropdown').on('show.bs.dropdown', function () {
 3  // 执行代码
 4});
 5
 6// 下拉菜单完全显示后触发
 7$('#myDropdown').on('shown.bs.dropdown', function () {
 8  // 执行代码
 9});
10
11// 下拉菜单隐藏前触发
12$('#myDropdown').on('hide.bs.dropdown', function () {
13  // 执行代码
14});
15
16// 下拉菜单完全隐藏后触发
17$('#myDropdown').on('hidden.bs.dropdown', function () {
18  // 执行代码
19});

下拉菜单的可访问性

为了提高可访问性，应添加适当的ARIA属性：

html 
 1<div class="dropdown">
 2  <button class="btn btn-secondary dropdown-toggle" type="button" id="accessibleDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 3    可访问的下拉菜单
 4  </button>
 5  <div class="dropdown-menu" aria-labelledby="accessibleDropdown">
 6    <a class="dropdown-item" href="#">选项 1</a>
 7    <a class="dropdown-item" href="#">选项 2</a>
 8    <a class="dropdown-item" href="#">选项 3</a>
 9  </div>
10</div>

最佳实践

  1. 保持简洁: 下拉菜单应该简洁明了，避免过多嵌套
  2. 提供视觉反馈: 使用活动状态和悬停效果让用户知道当前位置
  3. 考虑移动设备: 确保下拉菜单在触摸设备上易于使用
  4. 合理分组: 使用分割线和标题合理组织菜单项
  5. 提供快捷键: 对于频繁使用的操作，考虑提供键盘快捷键