前端必知必会-Bootstrap 5 下拉菜单

---

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” 属性的按钮或链接。

将 .dropdown-menu 类添加到容器元素（如

或

• ）以实际构建下拉菜单。 然后将 .dropdown-item 类添加到下拉菜单内的每个元素（链接或按钮）。

下拉分隔符

.dropdown-divider 类用于使用细水平边框分隔下拉菜单内的链接：

示例

<li><hr class="dropdown-divider"></hr></li>

下拉标题

.dropdown-header 类用于在下拉菜单内添加标题：

示例

<li><h5 class="dropdown-header">下拉标题 1</h5></li>

禁用和活动项目

使用 .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 类来创建“dropend”或“dropstart”菜单。请注意，插入符号/箭头会自动添加：

右下拉

<div class="dropdown dropend">

左下拉

<div class="dropdown dropstart">

下拉菜单右

要右对齐下拉菜单，请将 .dropdown-menu-end 类添加到带有 .dropdown-menu 的元素：

示例

<div class="dropdown-menu dropdown-menu-end">

下拉菜单
如果您希望下拉菜单向上展开而不是向下展开，请将带有 class=“dropdown” 的 <div> 元素更改为“dropup”：

示例

<div class="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">索尼</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">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">索尼</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">平板电脑</a></li>
<li><a class="dropdown-item" href="#">智能手机</a></li>
</ul>
</div>
</div>

---

总结

本文介绍了Bootstrap 5 下拉菜单的使用，如有问题欢迎私信和评论