下拉菜单是一种显示选项列表的面板，通过点击或悬停触发器（按钮或链接）显示。制作 Bootstrap 下拉菜单需以下步骤：创建容器并添加 dropdown 类。添加触发器元素（按钮或链接）并添加 dropdown-toggle 和 data-toggle="dropdown" 属性。创建无序列表并添加 dropdown-menu 类。在列表中添加包含链接或内容的列表项。
Bootstrap 下拉菜单制作指南
什么是下拉菜单？
下拉菜单是一种交互式组件，当用户点击或悬停时会显示一个包含选项列表的面板。
如何制作 Bootstrap 下拉菜单？
创建下拉菜单需用到以下 HTML 元素：
-
<div>容器用于包裹下拉菜单 -
<button>或<a>元素作为触发器，用户点击或悬停时显示菜单 -
<ul>无序列表用于包含菜单选项 -
<li>列表项用于表示单个菜单选项
步骤：
- 创建一个
<div>容器并添加dropdown类。 - 在容器内添加触发器元素（
<button>或<a>），并添加dropdown-toggle和data-toggle="dropdown"属性。 - 创建一个
<ul>无序列表，并将dropdown-menu类添加到该列表中。 - 在
<ul>列表内添加<li>列表项，并为每个选项添加链接或其他内容。
示例代码：
<code class="html"><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></code>高级选项：
-
子菜单：使用嵌套
<ul>和<li>元素创建子菜单。 -
分隔符：添加
<li role="separator" class="divider">将菜单项分隔开。 -
标题：添加
<li role="heading" class="dropdown-header">来创建标题。 -
禁用项：添加
disabled属性以禁用菜单项。
提示：
- 确保触发器元素具有
aria-haspopup="true"和aria-expanded="false"属性，以提高可访问性。 - 使用 JavaScript 来处理下拉菜单事件（例如，显示/隐藏菜单）。
- 利用 Bootstrap 文档和组件示例来获取更多高级用法。
