Bootstrap 按钮组

1.按钮组：.btn-group ---通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为（简单理解：让按钮在同一行显示），可以解决-合并重叠部分变厚的边框 ，即让第一个元素的所有兄弟元素向左移一个边

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

效果：

2.按钮工具栏，把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

  <div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">11</button>
  <button type="button" class="btn btn-default">12</button>
  <button type="button" class="btn btn-default">13</button>
    </div>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">21</button>
  <button type="button" class="btn btn-default">22</button>
    </div>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">33</button>
    </div>
  </div>

效果：

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

<div class="btn-group btn-group-lg" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left-L</button>
    <button type="button" class="btn btn-default">Middle-L</button>
    <button type="button" class="btn btn-default">Right-L</button>
  </div><br>
  <br>
  <br>
<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div><br>
<br>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div><br>
<br>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

效果：

4.可以实现下拉菜单嵌套到按钮中，把 .btn-group 放入另一个 .btn-group 中。

  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
  
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
      </ul>
    </div>

  </div>

效果：

5.要想让让一组按钮垂直堆叠排列显示而不是水平排列，则可使用btn-group-vertical

<div class="btn-group-vertical" role="group" aria-label="...">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
  
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
      </ul>
    </div>

效果：

6.让按钮组两端对齐

为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中

  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>

  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
      </ul>
    </div>
  </div>

效果：

7.分裂式按钮

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

效果：