Bootstrap 4 下拉菜单
基本下拉菜单
下拉菜单是一个可切换的菜单，允许用户从预定义列表中选择一个值
示例
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉按钮
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item" href="#">链接 3</a>
</div>
</div>
尝试一下 »
示例说明
.dropdown 类表示一个下拉菜单。
要打开下拉菜单，请使用一个按钮或链接，该按钮或链接具有 .dropdown-toggle 类和 data-toggle="dropdown" 属性。
将 .dropdown-menu 类添加到 <div> 元素中以实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）中。
下拉分隔符
.dropdown-divider 类用于使用细水平边框将下拉菜单中的链接分隔开
下拉标题
.dropdown-header 类用于在下拉菜单中添加标题
禁用和激活项目
使用 .active 类（添加蓝色背景颜色）突出显示特定下拉菜单项。
要禁用下拉菜单中的项目，请使用 .disabled 类（获得浅灰色文本颜色，并在悬停时获得“禁止停车标志”图标）
示例
<a class="dropdown-item active" href="#">激活</a>
<a class="dropdown-item disabled" href="#">禁用</a>
尝试一下 »
下拉菜单位置
您还可以通过将 .dropright 或 .dropleft 类添加到下拉元素中，创建“右下”或“左下”菜单。请注意，箭头将自动添加
下拉菜单右对齐
要右对齐下拉菜单，请将 .dropdown-menu-right 类添加到具有 .dropdown-menu 的元素
向上下拉
如果要使下拉菜单向上扩展而不是向下扩展，请将具有 class="dropdown" 的 <div> 元素更改为 "dropup"
下拉文本
.dropdown-item-text 类用于将纯文本添加到下拉菜单项，或用于链接以获得默认链接样式。
示例
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item-text" href="#">文本链接</a>
<span class="dropdown-item-text">纯文本</span>
</div>
尝试一下 »
带下拉菜单的按钮组
示例
<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-toggle="dropdown">
索尼
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板电脑</a>
<a class="dropdown-item" href="#">智能手机</a>
</div>
</div>
</div>
尝试一下 »
分割按钮下拉菜单
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
</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-toggle="dropdown">
索尼
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板电脑</a>
<a class="dropdown-item" href="#">智能手机</a>
</div>
</div>
</div>
尝试一下 »
完整 Bootstrap 4 下拉菜单参考
有关所有下拉选项、方法和事件的完整参考，请访问我们的 Bootstrap 4 JS 下拉菜单参考.
