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”