## 按鈕式下拉菜單 把任意一個按鈕放入`.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> ```