按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。
結構方面：使用一個類名為btn-group的容器，把多個按鈕放在這個容器中。
按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件：
Less：buttons.less
Sass:_buttons.scss
Css:Bootstrap.css 3131行~3291行
<div><button type="button"><span></span></button>…<button type="button"><span></span></button></div>
CSS:
.btn-group,.btn-group-vertical {position: relative;display: inline-block;vertical-align: middle;}.btn-group > .btn,.btn-group-vertical > .btn {position: relative;float: left;}.btn-group > .btn:hover,.btn-group-vertical > .btn:hover,.btn-group > .btn:focus,.btn-group-vertical > .btn:focus,.btn-group > .btn:active,.btn-group-vertical > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn.active {z-index: 2;}.btn-group > .btn:focus,.btn-group-vertical > .btn:focus {outline: none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group {margin-left: -1px;}除了可以使用<button>元素之外，還可以使用其他標籤元素，比如<a>標籤，唯一要保證的是：不管使用什麼標籤，.btn-group容器裡的標籤元素需要帶有類名.btn
按鈕組四個角都是圓角，除了第一個和最後一個按鈕具有邊上的圓角外，其他的按鈕沒有圓角。
詳解：
1、默認：所有按鈕都是圓角
2、除第一個按鈕和最後一個按鈕，其他的按鈕圓角取消
3、最後一個按鈕只留右上角和右下角為圓角
源碼：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {border-radius: 0;}.btn-group > .btn:first-child {margin-left: 0;}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {border-top-left-radius: 0;border-bottom-left-radius: 0;}.btn-group > .btn-group {float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {border-top-left-radius: 0;border-bottom-left-radius: 0;}按鈕組工具欄
在富文本編輯器中，將按鈕組分組排列在一起，比如說複製，剪切，粘貼一組，左對齊，中間對齊，右對齊和兩端對齊一組，這時需要用到bootstrap框架按鈕工具欄btn-toolbar
<div><div>…</div><div>…</div><div>…</div><div>…</div></div>
原理：主要是讓容器的多個分組.btn-group元素進行浮動，並且組與組之間保持5px的左外距
.btn-toolbar {margin-left: -5px;}.btn-toolbar .btn-group,.btn-toolbar .input-group {float: left;}.btn-toolbar > .btn,.btn-toolbar > .btn-group,.btn-toolbar > .input-group {margin-left: 5px;}注意在btn-toolbar上清除浮動
.btn-toolbar:before,.btn-toolbar:after｛ display: table;content: " ";｝.btn-toolbar:after{clear: both;}示例:
<div><div><button type="button"><span></span></button><button type="button"><span></span></button><button><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button type="button"><span></span></button></div></div>
按鈕嵌套分組
很多時候，我們把下拉菜單很普通的按鈕組排列在一起，實現類似於導航菜單的效果：
使用的時候只需將之前製作下拉菜單的dropdown容器的類名換成btn-group，並且和普通的按鈕放在同一級：
<div><button type="button">首頁</button><button type="button">產品展示</button><button type="button">案例分析</button><button type="button">聯繫我們</button><div><button data-toggle="dropdown" type="button">關於我們<span></span></button><ul><li><a href="#">公司簡介</a></li><li><a href="#">企業文化</a></li><li><a href="#">組織結構</a></li><li><a href="#">客服服務</a></li></ul></div></div>.btn-group > .btn-group {float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {border-top-left-radius: 0;border-bottom-left-radius: 0;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {outline: 0;}.btn-group > .btn + .dropdown-toggle {padding-right: 8px;padding-left: 8px;}.btn-group > .btn-lg + .dropdown-toggle {padding-right: 12px;padding-left: 12px;}.btn-group.open .dropdown-toggle {-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}.btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow: none;box-shadow: none;}按鈕垂直分組
只需把水平分組的類名.btn-group換成.btn-group-vertical即可。
<div><button type="button">首頁</button><button type="button">產品展示</button><button type="button">案例分析</button><button type="button">聯繫我們</button><div><button data-toggle="dropdown" type="button">關於我們<span></span></button><ul><li><a href="#">公司簡介</a></li><li><a href="#">企業文化</a></li><li><a href="#">組織結構</a></li><li><a href="#">客服服務</a></li></ul></div></div>.btn-group-vertical > .btn,.btn-group-vertical > .btn-group,.btn-group-vertical > .btn-group > .btn {display: block;float: none;width: 100%;max-width: 100%;}.btn-group-vertical > .btn-group > .btn {float: none;}.btn-group-vertical > .btn + .btn,.btn-group-vertical > .btn + .btn-group,.btn-group-vertical > .btn-group + .btn,.btn-group-vertical > .btn-group + .btn-group {margin-top: -1px;margin-left: 0;}.btn-group-vertical > .btn:not(:first-child):not(:last-child) {border-radius: 0;}.btn-group-vertical > .btn:first-child:not(:last-child) {border-top-right-radius: 4px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;}.btn-group-vertical > .btn:last-child:not(:first-child) {border-top-left-radius: 0;border-top-right-radius: 0;border-bottom-left-radius: 4px;}.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {border-bottom-right-radius: 0;border-bottom-left-radius: 0;}.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {border-top-left-radius: 0;border-top-right-radius: 0;}等分按鈕又稱為自適應分組按鈕：
整個按鈕組的寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器的寬度，例如一個按鈕組裡有五個按鈕，每個按鈕是容器寬度的20%；一個按鈕組裡有四個按鈕，每個按鈕是容器寬度的25%；
實現方法：只需要在按鈕組.btn-group 上追加一個類名.btn-group-justified
<div><buttton type="button">首頁</buttton><buttton type="button">案例分析</buttton><buttton type="button">聯繫我們</buttton><buttton type="button">關於我們</buttton></div>.btn-group-justified {display: table;width: 100%;table-layout: fixed;border-collapse: separate;}.btn-group-justified > .btn,.btn-group-justified > .btn-group {display: table-cell;float: none;width: 1%;}.btn-group-justified > .btn-group .btn {width: 100%;}把.btn-group-justified模擬成表格（display：table），並且把裡面的按鈕模板模擬成表格單元格（display：table-cell）。
注意：在製作等分按鈕組時，盡量使用<a>標籤來製作按鈕，因為使用button標籤元素時，使用display：table在部分瀏覽器下支持並不友好
武林網推薦閱讀：
詳解Bootstrap按鈕
以上所述是小編給大家介紹的Bootstrap按鈕組件，希望對大家有所幫助！