Bootstrap 按钮下拉菜单
使用 Bootstrap 创建按钮下拉菜单的方法
问题
如何使用 Bootstrap 设置按钮的下拉菜单？
解答
基础下拉菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 下拉菜单</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
<!-- 基础下拉菜单 -->
<div class="dropdown">
<!-- 触发按钮：data-bs-toggle="dropdown" 是关键属性 -->
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
下拉菜单
</button>
<!-- 下拉菜单内容 -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项一</a></li>
<li><a class="dropdown-item" href="#">选项二</a></li>
<li><hr class="dropdown-divider"></li> <!-- 分隔线 -->
<li><a class="dropdown-item" href="#">选项三</a></li>
</ul>
</div>
<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>分裂式按钮下拉菜单
<!-- 按钮和下拉箭头分开 -->
<div class="btn-group">
<button type="button" class="btn btn-danger">操作</button>
<!-- 单独的下拉触发按钮 -->
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">展开菜单</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">编辑</a></li>
<li><a class="dropdown-item" href="#">删除</a></li>
</ul>
</div>不同方向的下拉菜单
<!-- 向上弹出 -->
<div class="btn-group dropup">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向上
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项</a></li>
</ul>
</div>
<!-- 向右弹出 -->
<div class="btn-group dropend">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向右
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项</a></li>
</ul>
</div>
<!-- 向左弹出 -->
<div class="btn-group dropstart">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
向左
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项</a></li>
</ul>
</div>菜单项状态
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
菜单状态
</button>
<ul class="dropdown-menu">
<!-- 激活状态 -->
<li><a class="dropdown-item active" href="#">当前选中</a></li>
<li><a class="dropdown-item" href="#">普通选项</a></li>
<!-- 禁用状态 -->
<li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
</ul>
</div>关键点
- 容器使用
.dropdown类，按钮必须添加data-bs-toggle="dropdown"属性 - 菜单使用
.dropdown-menu，菜单项使用.dropdown-item - 方向控制：
.dropup（上）、.dropend（右）、.dropstart（左） - 分裂按钮需要
.btn-group容器和.dropdown-toggle-split类 - 必须引入 Bootstrap 的 JS 文件才能实现交互功能
目录