Bootstrap 下拉菜单

基础下拉列表

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

实例解析

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

.caret 类创建一个插入符号箭头图标 ()，表示该按钮是一个下拉列表。

<ul> 元素上添加 .dropdown-menu 类来设置实际下拉菜单。

下拉菜单中的分割线

.divider 类用于在下拉菜单中创建一个水平的分割线:

下拉菜单中的标题

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

下拉菜单中的禁用和激活项目

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

如果要禁用下拉菜单的选项，可以使用 .disabled 类:

下拉菜单的定位

右下拉菜单

如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类:

指定向上弹出的上拉菜单

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