Bootstrap 下拉菜单

基本下拉菜单

下拉菜单是一个可切换的菜单，允许用户从预定义列表中选择一个值。

示例说明

.dropdown 类表示下拉菜单。

要打开下拉菜单，请使用带有 .dropdown-toggle 类的按钮或链接以及 data-toggle="dropdown" 属性。

.caret 类创建了一个尖角箭头图标 ()，表示该按钮是下拉按钮。

将 .dropdown-menu 类添加到 <ul> 元素中，以实际构建下拉菜单。

下拉分隔符

.divider 类用于使用细水平边框分隔下拉菜单中的链接。

下拉标题

.dropdown-header 类用于在下拉菜单中添加标题。

禁用和活动项目

使用 .active 类突出显示特定下拉项目（添加蓝色背景色）。

要禁用下拉菜单中的项目，请使用 .disabled 类（获得浅灰色文本颜色和悬停时的“禁止停车”图标）。

下拉位置

要右对齐下拉菜单，请将 .dropdown-menu-right 类添加到带有 .dropdown-menu 的元素中。

下拉上

如果希望下拉菜单向上展开而不是向下展开，请将带有 class="dropdown" 的 <div> 元素更改为 "dropup" 。

下拉可访问性

为了帮助提高使用屏幕阅读器的人的可访问性，您应该在创建下拉菜单时包含以下 role 和 aria-* 属性。

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

完成 Bootstrap 下拉菜单参考

有关所有下拉选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 下拉菜单参考。