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 类添加到容器元素（例如 <div> 或 <ul>）以实际构建下拉菜单。然后将 .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 类来创建“dropend”或“dropstart”菜单。请注意，箭头/箭头会自动添加
下拉菜单右对齐
要右对齐下拉菜单，请将 .dropdown-menu-end 类添加到具有 .dropdown-menu 的元素
Dropup
如果您希望下拉菜单向上展开而不是向下展开，请将具有类 “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">苹果</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>
自己尝试 »
垂直按钮组带下拉菜单
示例
<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>
自己尝试 »
