4.3.1　基本用法

按钮组（Button group）的基本用法很简单，只需要在多个按钮外部使用一个容器元素（比如div），然后在容器元素上应用.btn-group样式即可。示例如下：

  1. <!-- 第一种方式 -->
  2. <div class="btn-group">
  3.    <button type="button" class="btn btn-default">Left</button>
  4.    <button type="button" class="btn btn-default">Middle</button>
  5.    <button type="button" class="btn btn-default">Right</button>
  6. </div>
  7. <!-- 第二种方式 -->
  8. <div class="btn-group">
  9.    <a class="btn btn-default">Left</a>
  10.    <a class="btn btn-default">Middle</a>
  11.    <a class="btn btn-default">Right</a>
  12. </div>

容器里的按钮，可以使用button元素，也可以使用a元素，产生的效果都是一样的。系统展示和排列的方式主要是由.btn-group样式和.btn样式来控制的，运行效果如图4-11所示。

4.3.1　基本用法 - 图1 图4-11　按钮组运行效果

按钮组的实现源代码如下：

  1. // 源码3122行
  2. .btn-group,
  3. .btn-group-vertical {   /* 多个分组的话，分组之间相对定位 */
  4.  position: relative;    /* 内联块模式 */
  5.  display: inline-block; /* 垂直居中 */
  6.  vertical-align: middle;
  7. }
  8. .btn-group > .btn,
  9. .btn-group-vertical > .btn {
  10.  position: relative;    /* 多个按钮的话，按钮之间相对定位 */
  11.  float: left;           /* 左浮动 */
  12. }
  13. .btn-group > .btn:hover,
  14. /* 此处省略部分选择符 */
  15. .btn-group-vertical > .btn.active {
  16.   z-index: 2;           /* 加大z-index */
  17. }
  18. .btn-group > .btn:focus,
  19. .btn-group-vertical > .btn:focus {
  20.  outline: none;         /* 焦点时，取消轮廓显示 */
  21. }
  22. .btn-group .btn + .btn,
  23. .btn-group .btn + .btn-group,
  24. .btn-group .btn-group + .btn,
  25. .btn-group .btn-group + .btn-group {
  26.  margin-left: -1px;     /* 消除2个按钮（或一个按钮和另外一个按钮组）之间的1像素细节引起的冲突 */
  27. }

另外，默认情况下，一组按钮的4个角都应该是圆角（支持CSS3的话）。其实现原理如下：

❑默认所有.btn样式的按钮都有圆角。

❑排除第一个按钮、最后一个按钮、Dropdown按钮以外，其他按钮都取消圆角设置。

❑第一个按钮的右上和右下角取消圆角设置。

❑最后一个按钮（或Dropdown）的左上和左下角，取消圆角设置。

  1. // 源码3165行
  2. .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  3.  border-radius: 0;              /* 除第一个、最后一个按钮和带有dropdown-toggle样式的元素外，其
  4.                             他btn样式的按钮不设置圆角 */
  5. }
  6. .btn-group > .btn:first-child {
  7.  margin-left: 0;                /* 第一个按钮左margin为0 */
  8. } 
  9. .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  10.  /* 第一个按钮（不是最后一个按钮和带有dropdown-toggle样式的情况下），右上和右下角不设置圆角 */
  11.  border-top-right-radius: 0;
  12.  border-bottom-right-radius: 0;
  13. }
  14. .btn-group > .btn:last-child:not(:first-child),
  15. .btn-group > .dropdown-toggle:not(:first-child) {
  16.  border-top-left-radius: 0;     /* 最后一个按钮或Dropdown（不是第一个按钮的情况下），左上和左下角不设置圆角 */
  17.  border-bottom-left-radius: 0;
  18. }