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>
自己动手试一试 »