在本教程中，我们将学习Bootstrap中的下拉菜单。

要使用下拉菜单，我们必须包含dropdown.js文件。

下拉列表示例

为了创建一个下拉菜单，我们使用.dropdown类，并将内容包装在里面。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

在上面的示例中，我们使用.btn .btn-default类创建了一个默认样式按钮，当单击该按钮时，下拉菜单打开。

菜单项是无序的列表项，我们已经给开始的ul标签提供了.dropdown-menu类。

Dropup

我们可以通过在父元素中添加.dropup类来使下拉菜单向上打开。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

对齐下拉菜单

在Bootstrap中，默认情况下，下拉菜单会自动从其父菜单的顶部和左侧开始100％定位。

我们可以使用.dropdown-menu-right类将下拉菜单向右对齐。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

将标题添加到下拉菜单

我们使用.dropdown-header类添加下拉头。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li class="dropdown-header">Header</li>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

将分隔符添加到下拉菜单

我们可以使用.divider类将分隔符添加到下拉菜单中。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 2</a></li>
  </ul>
</div>

禁用菜单项

要禁用菜单项，我们向菜单项添加.disabled类。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li class="disabled"><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>