## 按钮式下拉菜单 把任意一个按钮放入`.btn-group`中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。 注意： 按钮式下拉菜单依赖 下拉菜单插件，因此需要将此插件包含在你所使用的 Bootstrap 版本中。 **单按钮下拉菜单** 按钮式下拉菜单其实就是普通的下拉菜单，唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”，display从block换成了inline-block。 ```html <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> success <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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> ```  ***** **分裂式按钮下拉菜单** 分裂式按钮下拉菜单其实就是人为地将按钮和三角割裂开，使得最终多一个分开的按钮而已。 ```html <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" aria-haspopup="true" aria-expanded="false"> <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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> ```  ***** **尺寸** 按钮式下拉菜单适用所有尺寸按钮，包括btn-xs、btn-lg、btn-sm等，当然普通下拉列表也支持改变按钮尺寸。 ```html <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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> <div class="btn-group"> <button type="button" class="btn btn-default btn-ms dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> ```  ***** **向上弹出式菜单** 如果三角方向需要朝上显示，需要在“.btn-group”类上追加“dropup”类名，可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。 ```html <div class="btn-group dropup"> <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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> ```