Bootstrap 4 下拉与上拉菜单组件实现指南
环境依赖配置
在 Bootstrap 4 中，下拉菜单（Dropdown）的交互行为依赖于 JavaScript 插件。为了确保组件正常工作，必须在引入 Bootstrap JS 之前，先加载 jQuery（3.2 及以上版本）和 Popper.js。
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>核心 CSS 类名解析
构建下拉菜单需要组合使用特定的 CSS 类。以下是常用的类名及其功能说明：
触发器与容器类
| 类名 | 功能描述 |
|---|---|
.dropdown |
基础容器类，用于包裹触发器和菜单内容，确立相对定位上下文。 |
.dropup |
替代 .dropdown 使用，使菜单向上弹出（若空间不足会自动回退为向下）。 |
.dropdown-toggle |
应用于触发元素（如按钮或链接），并需配合 data-toggle="dropdown" 属性激活交互。 |
.dropdown-toggle-split |
用于按钮组中的分裂按钮，调整触发器的内边距以优化视觉比例。 |
菜单内容类
| 类名 | 功能描述 |
|---|---|
.dropdown-menu |
菜单面板容器，默认隐藏，触发后显示。 |
.dropdown-menu-right |
将菜单面板的对齐方式从默认的左对齐更改为右对齐。 |
.dropdown-item |
应用于菜单内的具体操作项（通常为 <a> 或 <button>）。 |
.dropdown-header |
用于在菜单中添加分组标题，不可点击。 |
.dropdown-divider |
在菜单项之间生成一条水平分割线，用于逻辑分组。 |
.active |
高亮显示当前选中的菜单项。 |
.disabled |
禁用特定菜单项，阻止点击并改变视觉样式。 |
代码实现示例
1. 基础链接触发下拉菜单
使用标准的 .dropdown 容器，结合链接标签作为触发器，并展示右对齐和禁用状态的使用。
<div class="dropdown">
<a href="#" class="btn btn-outline-secondary dropdown-toggle" id="userMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
用户中心
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenuLink">
<h6 class="dropdown-header">账户管理</h6>
<a class="dropdown-item" href="#profile">个人资料</a>
<a class="dropdown-item" href="#billing">账单明细</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#premium" tabindex="-1" aria-disabled="true">升级会员</a>
</div>
</div>2. 按钮组与分裂按钮下拉
当需要将主要操作与下拉菜单结合时，可使用 .btn-group 配合 .dropdown-toggle-split 实现分裂按钮效果。
<div class="btn-group">
<button type="button" class="btn btn-success">执行批量任务</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">展开更多选项</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#export">导出为 CSV</a>
<a class="dropdown-item" href="#print">打印报表</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#archive">归档数据</a>
</div>
</div>3. 上拉菜单（Dropup）
若组件靠近页面底部，可将外层容器的类名替换为 .dropup，菜单将向上展开。需注意，如果上方空间不足，Popper.js 会自动将其回退为下拉模式。
<div class="dropup">
<button class="btn btn-info dropdown-toggle" type="button" id="dropupTrigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
向上弹出菜单
</button>
<div class="dropdown-menu" aria-labelledby="dropupTrigger">
<a class="dropdown-item" href="#scroll-top">回到顶部</a>
<a class="dropdown-item" href="#refresh">刷新视图</a>
<a class="dropdown-item" href="#help">获取帮助</a>
</div>
</div>
