Bootstrap 5 下拉菜单
基本下拉菜单
下拉菜单是一个可切换的菜单，允许用户从预定义列表中选择一个值
示例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div>
自己动手试一试 »
示例解释
`.dropdown` 类表示一个下拉菜单。
要打开下拉菜单，请使用带有类名 .dropdown-toggle 和属性 data-bs-toggle="dropdown" 的按钮或链接。
为容器元素（如 <div> 或 <ul>）添加 .dropdown-menu 类来构建下拉菜单。然后在下拉菜单中的每个元素（链接或按钮）上添加 .dropdown-item 类。
下拉分隔线
.dropdown-divider 类用于在下拉菜单中的链接之间添加细水平边框。
下拉标题
`.dropdown-header` 类用于在下拉菜单中添加标题
禁用和激活项
使用 .active 类高亮显示特定的下拉菜单项（添加蓝色背景色）。
要禁用下拉菜单中的一项，请使用 `.disabled` 类（鼠标悬停时显示浅灰色文本颜色和“禁止通行”图标）。
示例
<li><a class="dropdown-item" href="#">普通</a></li>
<li><a class="dropdown-item active" href="#">活动</a></li>
<li><a class="dropdown-item disabled" href="#">禁用</a></li>
自己动手试一试 »
下拉菜单位置
您还可以通过向下拉菜单元素添加 .dropend 或 .dropstart 类来创建“右侧下拉”或“左侧下拉”菜单。注意，插入符号/箭头是自动添加的。
右对齐下拉菜单
要使下拉菜单右对齐，请向 .dropdown-menu 元素添加 .dropdown-menu-end 类。
下拉菜单
如果您希望下拉菜单向上展开而不是向下展开，请将类为 `"dropdown"` 的 `<div>` 元素更改为 `"dropup"`。
下拉文本
.dropdown-item-text 类用于向下拉菜单项添加纯文本，或用于具有默认链接样式的链接。
示例
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
<li><a class="dropdown-item-text" href="#">文本链接</a></li>
<li><span class="dropdown-item-text">纯文本</span></li>
</ul>
自己动手试一试 »
分组按钮，带下拉菜单
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">平板电脑</a></li>
<li><a class="dropdown-item" href="#">智能手机</a></li>
</ul>
</div>
</div>
自己动手试一试 »
垂直按钮组带下拉菜单
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">平板电脑</a></li>
<li><a class="dropdown-item" href="#">智能手机</a></li>
</ul>
</div>
</div>
自己动手试一试 »
