按鈕（按鈕組）
單個按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器裏的一組小圖標按鈕等。那麼在這一節中，我們主要向大家介紹Bootstrap框架爲大家提供的按鈕組組件。
源碼查詢：
按鈕組也是一個獨立的組件，所以可以找到對應的源碼文件：
LESS版本：對應的源文件爲buttons.less
Sass版本：對應的源文件爲_buttons.scss
CSS版本：對應bootstrap.css文件第3131行～第3291行
使用方法：
按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運行。不過我們同樣可以直接只調用bootstrap.js文件。因爲這個文件已集成了button.js插件功能。
對於結構方面，非常的簡單。使用一個名爲“btn-group”的容器，把多個按鈕放到這個容器中。如下所示：
<div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button> … <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-forward"></span> </button> </div>
除了可以使用<button>元素之外，還可以使用其他標籤元素，比如<a>標籤。唯一要保證的是：不管使用什麼標籤，“.btn-group”容器裏的標籤元素需要帶有類名“.btn”。
按鈕組實現源碼如下：
/*查看bootstrap.css文件第3131行～第3161行*/
.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;
}從效果圖上我們可以看出，按鈕組四個角都是圓角（支持CSS3的瀏覽器），但有的小夥伴會問，我們平常製作網頁時每個按鈕都是帶有圓角，而在按鈕組中的按鈕，除了第一個和最後一個具有邊上的圓角之外，其他的按鈕沒有圓角，它是怎麼實現的呢？其實實現方法非常簡單：
1、默認所有按鈕都有圓角
2、除第一個按鈕和最後一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
3、第一個按鈕只留左上角和左下角是圓角
4、最後一個按鈕只留右上角和右下角是圓角
對應的源碼如下：
/*查看bootstrap.css文件第3174行～第3203行*/
.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-group”按組放在一個大的容器“btn-toolbar”中，如下所示：
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>
實現原理主要是讓容器的多個分組“btn-group”元素進行浮動，並且組與組之前保持5px的左外距。代碼如下：
/*源碼請查閱bootstrap.css文件第3162行～第3173行*/
.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”上清除浮動。
/*源碼請查閱bootstrap.css文件第5062行*/
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}按鈕組大小設置
在介紹按鈕一節中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那麼按鈕組的大小，我們也可以通過類似的方法：
.btn-group-lg:大按鈕組
.btn-group-sm:小按鈕組
.btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。如下所示：
<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>
實現樣式代碼如下：
/*源碼請查閱bootstrap.css文件第2320行～第2340行*/
.btn-lg,.btn-group-lg> .btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,.btn-group-xs> .btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}