## 按鈕組 通過按鈕組容器（.btn-group）把一組按鈕放在同一行里。通過與按鈕插件聯合使用，可以設置為單選框或多選框的樣式和行為。 注意： 1. 按鈕組中的工具提示和彈出框需要特別的設置。當為`.btn-group`中的元素應用工具提示或彈出框時，必須指定`container: 'body'`選項，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發時，會讓頁面元素變寬和/或失去圓角）。 2. 確保設置正確的`role`屬性并提供一個 label 標簽。為了向使用輔助技術 - 如屏幕閱讀器 - 的用戶正確傳達一正確的按鈕分組，需要提供一個合適的`role`屬性。對于按鈕組合，應該是`role="group"`，對于toolbar（工具欄）應該是`role="toolbar"`。 3. 此外，按鈕組和工具欄應給定一個明確的label標簽，盡管設置了正確的`role`屬性，但是大多數輔助技術將不會正確的識讀他們。在這里提供的實例中，我們使用`aria-label`，但是，`aria-labelledby`也可以使用。 **基本實例** 在.btn組中用.btn包裝一系列按鈕。 ```html <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> ```  ***** **按鈕工具欄** 我們常常會看到將多個按鈕組合在一起使用，那么把一組`<div class="btn-group">`組合進一個`<div class="btn-toolbar">`中就可以做成按鈕組。 ```html <div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">one</button> </div> </div> ```  ***** **尺寸**（按鈕組大小） 只要給`.btn-group`加上`.btn-group-*`類，就省去為按鈕組中的每個按鈕都添加尺寸類了，如果包含了多個按鈕組時也適用。按鈕組的大小，我們也可以通過以下方法： .btn-group-lg:大按鈕組 .btn-group-sm:小按鈕組 .btn-group-xs:超小按鈕組 只需要在`.btn-group`類名上追加對應的類名，就可以得到不同大小的按鈕組。 ```html <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group btn-group-lg" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group btn-group-sm" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group btn-group-xs" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> ```  ***** **下拉菜單組嵌套** 想要把下拉菜單混合到一系列按鈕中，只須把`.btn-group`放入另一個`.btn-group`中。 ```html <div class="btn-group" role="group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="##">link</a></li> <li><a href="##">link</a></li> </ul> </div> </div> ```  ***** **下拉菜單垂直排列** 讓一組按鈕垂直堆疊排列顯示而不是水平排列。在按鈕組添加類 .btn-group-vertical ```html <div class="btn-group" role="group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="##">link</a></li> <li><a href="##">link</a></li> </ul> </div> </div> ```  ***** **兩端對齊排列的按鈕組** 讓一組按鈕拉長為相同的尺寸，填滿父元素的寬度。對于按鈕組中的按鈕式下拉菜單也同樣適用。 **注意** ：1. 關于邊框的處理。由于對兩端對齊的按鈕組使用了特定的 HTML 和 CSS （即`display: table-cell`），兩個按鈕之間的邊框疊加在了一起。 2. IE8 和邊框。 IE8不支持在兩端對齊的按鈕組中繪制邊框，無論是`<a>`或`<button>`元素。為了兼容IE8，把每個按鈕放入另一個`.btn-group`中即可。 **（1）** 關于`<a>`元素 只須將一系列`.btn`元素包裹到`.btn-group.btn-group-justified`中即可。 ```html <div class="btn-group btn-group-justified" role="group" aria-label="..."> <a type="button" class="btn btn-default">Left</a> <a type="button" class="btn btn-default">Middle</a> <a type="button" class="btn btn-default">Right</a> </div> ```  如果 a 元素用作按鈕在頁面功能中觸發，而不是鏈接到其他頁面中去，還要給它們添加屬性role=“button”。 **（2）** 關于`<button>`元素 為了將`<button>`元素用于兩端對齊的按鈕組中，必須將每個按鈕包裹進一個按鈕組中。 ```html <div class="btn-group btn-group-justified" role="group"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Milddle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> ``` 它的頁面效果和 a 元素展示的效果一樣。