Bootstrap 下拉菜单

Bootstrap 下拉菜单

Bootstrap 是一个流行的前端框架，它提供了许多预构建的组件，使得网页设计和开发变得更加快速和简单。下拉菜单是 Bootstrap 中一个非常有用的组件，它允许用户从一系列选项中选择一个值。本文将详细介绍如何在 Bootstrap 中创建和定制下拉菜单。

下拉菜单的基本结构

在 Bootstrap 中，下拉菜单通常由三个主要部分组成：下拉按钮、下拉菜单和菜单项。下拉按钮是一个触发下拉菜单的元素，而下拉菜单则包含了一系列可选择的菜单项。

HTML 结构

在 HTML 中，下拉菜单通常使用 <div>、<button> 和 <ul> 元素来创建。以下是一个基本下拉菜单的 HTML 结构：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

在这个例子中，