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` 元素添加 `.dropdown-menu-right` 类。
下拉菜单
如果您希望下拉菜单向上展开而不是向下展开，请将类为 `"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">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-toggle="dropdown">
Sony
</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">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-toggle="dropdown">
Sony
</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 下拉菜单参考。
