4.3.2　按钮工具栏

按钮工具栏主要是将多个按钮组排列在一起，例如，1、2、3、4是一个分组，5、6、7是一个分组，8单独是一个分组，总共3个分组显示在一起，如图4-12所示。

4.3.2　按钮工具栏 - 图1 图4-12　按钮组工具栏运行效果

按钮工具栏的用法和按钮组类似，即：在多个分组外部放一个大的容器元素，然后在容器元素上应用另外一个新的.btn-toolbar样式。示例如下：

  1. <div class="btn-toolbar">
  2.  <div class="btn-group">...</div>
  3.  <div class="btn-group">...</div>
  4.  <div class="btn-group">...</div>
  5. </div>

源码实现主要是让容器的多个分组以table风格进行显示，并且每个分组之间保持5像素的left margin。代码如下：

  1. // 源码5608行
  2. .btn-toolbar:before,
  3. .btn-toolbar:after {
  4.  display: table;                /* table风格显示，等高 */
  5.  content: " ";
  6. }
  7. .btn-toolbar:after {
  8.   clear: both;          /* 结束以后，清除浮动 */
  9. }
  10. // 源码3156行
  11. .btn-toolbar .btn-group,
  12. .btn-toolbar .input-group {
  13.  float: left;           /* 每组都是左浮动 */
  14. }
  15. .btn-toolbar > .btn,
  16. .btn-toolbar > .btn-group,
  17. .btn-toolbar > .input-group {
  18.  margin-left: 5px;      /* 每个分组之间有5像素的left margin */
  19. }