Bootstrap 按钮下拉菜单学习笔记

什么是下拉菜单？

下拉菜单是一种常见的用户界面组件，它可以在单个按钮上放置多个选项，并在用户单击按钮时显示这些选项。下拉菜单通常用于创建具有多个选项的操作，例如从一组选择中选择一个选项。

如何在Bootstrap中创建下拉菜单？

步骤1：准备HTML代码

要创建一个下拉菜单，我们需要使用HTML来定义一个带有类名 dropdown 的 div 元素，该元素包含一个带有类名 dropdown-toggle 的按钮和一个带有类名 dropdown-menu 的下拉菜单。此外，每个下拉菜单项都应该使用 a 标签表示。

htmlCopy Code
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

步骤2：添加必要的JavaScript文件

为了使下拉菜单正常工作，我们需要在网页中引入必要的JavaScript库文件。Bootstrap依赖于jQuery和Popper.js，所以我们需要先引入这两个库文件，然后再引入Bootstrap的JavaScript文件。

htmlCopy Code
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- 引入Popper.js库 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

步骤3：初始化下拉菜单

最后，我们需要在页面加载完成后初始化下拉菜单。我们可以通过在 body 元素上添加 data-bs-spy="scroll" 和 data-bs-target="#navbarNav" 属性来激活导航栏的自动滚动效果。

htmlCopy Code
<body data-bs-spy="scroll" data-bs-target="#navbarNav">
  <!-- 在此处添加页面内容... -->
</body>

实例演示

下面是一个简单的实例，展示了如何在Bootstrap中创建一个下拉菜单。你可以试着点击按钮来查看下拉菜单的效果。

htmlCopy Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap下拉菜单</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

  <div class="container mt-5">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        下拉菜单
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">选项1</a>
        <a class="dropdown-item" href="#">选项2</a>
        <a class="dropdown-item" href="#">选项3</a>
      </div>
    </div>
  </div>

  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

  <!-- 引入Popper.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

  <!-- 引入Bootstrap的JavaScript文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

以上代码可以直接复制到你的编辑器中，保存为 index.html 并用浏览器来访问，就可以查看下拉菜单的效果。