4.3.3　按钮尺寸设置

在按钮组里也可以使用.btn样式的3个额外的尺寸即.btn-lg、.btn-sm、.btn-xs来调整按钮大小，以便形成如图4-13所示的效果。可以在每一组的所有按钮上重复应用上述样式。

4.3.3　按钮尺寸设置 - 图1 图4-13　不同尺寸的按钮组运行效果

但是Bootstrap专门又为按钮组提供了额外的样式，以便不用在多个按钮上重复应用样式。其用法是：在.btn-group样式的元素上再次应用.btn-group-lg、.btn-group-sm、.btn-group-xs样式即可提供同样的效果，一次设置，全组都有效。

  1. <div class="btn-group btn-group-lg">...</div>
  2. <div class="btn-group">...</div>
  3. <div class="btn-group btn-group-sm">...</div>
  4. <div class="btn-group btn-group-xs">...</div>

按钮组的实现原理和普通按钮的尺寸设置一样，即修改相关的padding、font-size、line-height以及border-radius。

  1. /* 源码 3199 行 */
  2. .btn-group-xs > .btn { padding: 1px 5px;  font-size: 12px;  line-height: 1.5;  
  3.         border-radius: 3px;}
  4. .btn-group-sm > .btn { padding: 5px 10px;  font-size: 12px;  line-height: 1.5;  
  5.         border-radius: 3px;}
  6. .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px;  line-height: 1.33;  
  7.         border-radius: 6px;}

有的读者可能有疑问，如果设置了.btn-group-lg样式，并且在里面的按钮上又设置了.btn-sm样式，效果是怎样的呢？里面的按钮肯定不会变小的，因为.btn-group-lg样式是在.btn-sm样式之后定义的，在这种场景下，会使用后面覆盖的样式。

同时，在btn-group组里，如果在普通按钮旁边放置下拉菜单的话，也进行了padding值的微调（仅普通按钮和大型按钮），以修正显示效果，详细分析见下一小节。

  1. // 源码3217行
  2. .btn-group > .btn + .dropdown-toggle {  padding-right: 8px;  padding-left: 8px;}
  3. .btn-group > .btn-lg + .dropdown-toggle {  padding-right: 12px;  padding-left: 12px;}