單個按鈕在Web頁面中的運用有時候并不能滿足我們的業(yè)務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標按鈕等。那么在這一節(jié)中，我們主要向大家介紹Bootstrap框架為大家提供的按鈕組組件。

源碼查詢：

按鈕組也是一個獨立的組件，所以可以找到對應的源碼文件：

  ?  LESS版本：對應的源文件為buttons.less

  ?  Sass版本：對應的源文件為_buttons.scss

  ?  CSS版本：對應bootstrap.css文件第3131行～第3291行

使用方法：

按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運行。不過我們同樣可以直接只調(diào)用bootstrap.js文件。因為這個文件已集成了button.js插件功能。

對于結(jié)構(gòu)方面，非常的簡單。使用一個名為“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”。

按鈕組實現(xiàn)源碼如下：

/*查看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的瀏覽器），但有的小伙伴會問，我們平常制作網(wǎng)頁時每個按鈕都是帶有圓角，而在按鈕組中的按鈕，除了第一個和最后一個具有邊上的圓角之外，其他的按鈕沒有圓角，它是怎么實現(xiàn)的呢？其實實現(xiàn)方法非常簡單：

  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;
}