在本教程中，我们将了解Bootstrap中的按钮下拉菜单。

按钮下拉菜单需要下拉插件dropdown。

简单的按钮下拉菜单

我们可以通过在.btn-group类中添加.dropdown-menu来将按钮变成下拉开关。

<!-- single button dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

拆分按钮下拉菜单

我们可以使用.btn-group和.dropdown-menu类创建拆分按钮下拉菜单。

<!-- split button -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Menu</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

按钮组大小

我们可以使用以下类来更改按钮的大小：大按钮为.btn-lg，小按钮为.btn-sm，小按钮为.btn-xs。

<!-- large button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

<!-- small button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

<!-- extra small button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>