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-toggle="dropdown" 属性的按钮或链接。
将 .dropdown-menu 类添加到 <div> 元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。
下拉列表分隔线
.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：
实例
<li><hr class="dropdown-divider"></hr></li>
亲自试一试
下拉列表标题
.dropdown-header 类用于在下拉菜单中添加标题：
实例
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
亲自试一试
禁用的和活动的项目
请使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。
如需禁用下拉列表中的某个项目，请使用 .disabled 类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）。
实例
<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" 菜单。请注意，插入符号/箭头是自动添加的：
Dropright
<div class="dropdown dropend">
亲自试一试
Dropleft
<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">华为</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>
亲自试一试
BS5 卡片
BS5 折叠
JavaScript 测验
W3School 简体中文版提供的内容
页:
[1]