下拉菜单是一种显示选项列表的面板，通过点击或悬停触发器（按钮或链接）显示。制作 bootstrap 下拉菜单需以下步骤：创建容器并添加 dropdown 类。添加触发器元素（按钮或链接）并添加 dropdown-toggle 和 data-toggle="dropdown" 属性。创建无序列表并添加 dropdown-menu 类。在列表中添加包含链接或内容的列表项。

Bootstrap 下拉菜单制作指南

什么是下拉菜单？

下拉菜单是一种交互式组件，当用户点击或悬停时会显示一个包含选项列表的面板。

如何制作 Bootstrap 下拉菜单？

创建下拉菜单需用到以下 HTML 元素：

• 容器用于包裹下拉菜单
• 或 元素作为触发器，用户点击或悬停时显示菜单
• 无序列表用于包含菜单选项
• 列表项用于表示单个菜单选项

步骤：

1. 创建一个 容器并添加 dropdown 类。
2. 在容器内添加触发器元素（ 或 ），并添加 dropdown-toggle 和 data-toggle="dropdown" 属性。
3. 创建一个
   无序列表，并将 dropdown-menu 类添加到该列表中。
4. 在
   列表内添加
   • 列表项，并为每个选项添加链接或其他内容。

   示例代码：

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

   高级选项：

   • 子菜单：使用嵌套
     和
     • 元素创建子菜单。
     • 分隔符：添加
     • 将菜单项分隔开。
     • 标题：添加
     • 来创建标题。
     • 禁用项：添加 disabled 属性以禁用菜单项。

     提示：

     • 确保触发器元素具有 aria-haspopup="true" 和 aria-expanded="false" 属性，以提高可访问性。
     • 使用 JavaScript 来处理下拉菜单事件（例如，显示/隐藏菜单）。
     • 利用 Bootstrap 文档和组件示例来获取更多高级用法。