按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关

xxxxxxxxxx
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮

xxxxxxxxxx
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

尺寸

按钮式下拉菜单适用所有尺寸的按钮

xxxxxxxxxx
<div class="btn-group">
    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
        Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
        Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
        Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    </ul>
</div>

向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开

xxxxxxxxxx
<div class="btn-group dropup">
    ...
</div>