Bootstrap 按钮下拉菜单

上一节的按钮组讲"并排多个按钮"，本节讲"按钮 + 下拉菜单"的合体：点按钮或右侧小箭头展开选项。它是工具条、表格操作列里最常见的交互之一，同样依赖 Bootstrap 的 JS 文件。

单按钮下拉

在 btn 上同时加 dropdown-toggle 与 data-toggle="dropdown"，后面紧跟带 caret 小箭头的下拉菜单。

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    操作 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">查看详情</a></li>
    <li><a href="#">编辑</a></li>
    <li class="divider"></li>
    <li><a href="#">删除</a></li>
  </ul>
</div>
<!-- 效果：蓝色按钮右侧有小箭头，点击弹出四个选项（含分隔线） -->

注意：外层要用 btn-group 而不是普通 dropdown，这样按钮与菜单才能对齐成一体。

分裂式按钮下拉

分裂式由两个按钮并排组成：左边是主按钮直接执行主操作，右边是带 caret 的小按钮负责展开菜单，两者视觉上仍是一个整体。

<div class="btn-group">
  <button type="button" class="btn btn-success">保存</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">展开更多选项</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">另存为</a></li>
    <li><a href="#">保存副本</a></li>
  </ul>
</div>
<!-- 效果：绿色"保存"主按钮右侧紧贴分裂箭头按钮，点箭头弹出菜单 -->

向上弹出 dropup

菜单默认向下展开；若按钮位于页面底部，可把外层容器类由 dropdown 改成 dropup，菜单就会向上弹出，避免超出视口。

<div class="dropup">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    更多 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">菜单从上方弹出</a></li>
  </ul>
</div>
<!-- 效果：点击"更多"时菜单从按钮上方展开，caret 箭头也随之反转朝上 -->

尺寸与对齐

尺寸由外层 btn-group-lg、btn-group-sm、btn-group-xs 控制；菜单默认左对齐按钮，加 dropdown-menu-right 可改为右对齐，适合靠右放置的操作列。

<div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    小号按钮下拉 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">右对齐菜单</a></li>
  </ul>
</div>
<!-- 效果：按钮为小号，菜单右边缘与按钮右边缘对齐 -->

小结

按钮下拉的核心是"btn-group 容器 + dropdown-toggle 触发器 + dropdown-menu 菜单"，再按需求选择分裂式、dropup 与对齐方式，即可覆盖大部分场景。