Bootstrap 下拉菜单

基本下拉菜单

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

示例解释

`.dropdown` 类表示一个下拉菜单。

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

.caret 类创建一个caret箭头图标（），这表明该按钮是下拉菜单。

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

下拉分隔线

.divider 类用于在下拉菜单中的链接之间添加一条细的水平分隔线

下拉标题

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

禁用和激活项

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

要禁用下拉菜单中的一项，请使用 `.disabled` 类（鼠标悬停时显示浅灰色文本颜色和“禁止通行”图标）。

下拉菜单位置

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

下拉菜单

如果您希望下拉菜单向上展开而不是向下展开，请将类为 `"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 下拉菜单参考。