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 文件才能实现交互功能
Bootstrap 徽章 Bootstrap 按钮组

目录