在Bootstrap 4.5中,可以使用以下类来设置下拉项的活动外观:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>
在上述示例中,选项1将以活动状态显示。
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item disabled" href="#">选项2(禁用)</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>
在上述示例中,选项2将以禁用状态显示。
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<h6 class="dropdown-header">分组标题</h6>
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>
在上述示例中,分组标题将以特殊样式显示。
这些类可以帮助你在Bootstrap 4.5中设置下拉项的活动外观。更多关于Bootstrap的信息和使用方法,你可以参考腾讯云的Bootstrap产品文档:Bootstrap 产品文档。
领取专属 10元无门槛券
手把手带您无忧上云