Bootstrap 基础组件 第1关：Bootstrap下拉菜单

Bootstrap 下拉菜单是一个常用的导航元素，它允许用户点击主按钮展开一系列相关的选项。在Bootstrap中，你可以通过HTML结构和一些基本CSS样式轻松创建一个下拉菜单。以下是创建一个基础下拉菜单的步骤：

1. **HTML结构**：
使用`<div>`标签包裹下拉菜单，并包含两个主要部分：一个`<button>`作为触发器（通常显示一个图标或文字），另一个`<ul>`列表用于存储下拉项。

<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">菜单标题</button>
<ul class="dropdown-menu">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <!-- 添加更多下拉项 -->
</ul>

这里，`data-bs-toggle="dropdown"`属性告诉Bootstrap这是一个下拉菜单。

2. **Bootstrap CSS**：
`btn-primary`是Bootstrap预设的颜色样式，你可以根据需要更改。`.dropdown-menu`类负责下拉菜单的外观和定位。

为了更好地工作，你还需要引入Bootstrap的CSS和JavaScript文件，特别是用于处理下拉菜单交互的jQuery插件（如果尚未引入）：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>