Bootstrap 5 下拉菜单

Bootstrap 5 下拉菜单

Bootstrap 5 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。下拉菜单是 Bootstrap 5 的一个重要组件，它允许用户从下拉列表中选择一个选项。在本文中，我们将详细介绍 Bootstrap 5 下拉菜单的用法、示例和最佳实践。

1. 简介

Bootstrap 5 下拉菜单通过使用少量的 JavaScript，可以轻松地将标准的 HTML 选择菜单转换成下拉菜单。下拉菜单可以包含链接、按钮或任何其他 HTML 内容。它们是可自定义的，可以通过 CSS 类进行样式设置。

2. 基础用法

要创建一个基本的 Bootstrap 5 下拉菜单，您需要以下 HTML 结构：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">选项 1</a></li>
    <li><a class="dropdown-item" href="#"