Bootstrap按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

---

基本示例

  <div class="btn-group">
    <button type="button" class="btn btn-default">百度</button>
    <button type="button" class="btn btn-default">百度</button>
    <button type="button" class="btn btn-default">百度</button>
    <button type="button" class="btn btn-default">百度</button>
    <button type="button" class="btn btn-default">百度</button>
  </div>

---

按钮工具栏

把一组 div class=”btn-group” 组合进一个 div class=”btn-toolbar”中就可以做成更复杂的组件。

<div class="btn-toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-success">淘宝</button>
      <button type="button" class="btn btn-success">淘宝</button>
      <button type="button" class="btn btn-success">淘宝</button>
    </div>
</div>  

---

尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
      <button type="button" class="btn btn-default">百度</button>
    </div>
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
      <button type="button" class="btn btn-warning">腾讯</button>
    </div>
    <div class="btn-group btn-group-xs">
      <button type="button" class="btn btn-success">淘宝</button>
      <button type="button" class="btn btn-success">淘宝</button>
      <button type="button" class="btn btn-success">淘宝</button>
    </div>
</div>  

---

嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

 <div class="btn-group">
      <button type="button" class="btn btn-success">湖南</button>
      <button type="button" class="btn btn-warning">江西</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary" data-toggle="dropdown">
          广东
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
      </div>
  </div>

PS：上图中样式不是非常和谐统一，“湖南”按钮两边有圆角处理，而“广东”按钮为直角了；为了解决这个问题，在广东的button里面加入class=”dropdown-toggle”，这样就完美了；

 <div class="btn-group">
      <button type="button" class="btn btn-success">湖南</button>
      <button type="button" class="btn btn-warning">江西</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          广东
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
      </div>
  </div>

---

垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。class=”btn-group-vertical”

 <div class="btn-group-vertical">
      <button type="button" class="btn btn-success">湖南</button>
      <button type="button" class="btn btn-warning">江西</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary" data-toggle="dropdown">
          广东
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
      </div>
  </div>  

---

两端对齐排列的按钮组

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。class=”btn-group btn-group-justified”