2.3.3　尺寸样式

Bootstrap也为大部分组件都提供了尺寸的快捷设置。一般组件都有4种尺寸：超小（xs）、小型（sm）、普通、大型（lg）。使用示例如下所示：

  1. <button type="button" class="btn btn-xs">Primary</button>
  2. <button type="button" class="btn btn-lg">Success</button>
  3. <div class="well well-lg">...</div>
  4. <div class="well well-sm">...</div>

调整尺寸主要是调整所对应元素的padding和圆角设置，有时候也会相应调整行间距和字体大小。btn按钮和well组件在尺寸方面的设置源码如下所示（截取的一部分）：

  1. /* 源码2134行*/
  2. .btn-lg {
  3.   padding: 10px 16px;
  4.   font-size: 18px;
  5.   line-height: 1.33;
  6.   border-radius: 6px;
  7. }
  8. /* 源码5060行*/
  9. .well-lg {
  10.   padding: 24px;                                /*加大内边距*/
  11.   border-radius: 6px;                   /*加大圆角设置*/
  12. }
  13. .well-sm {
  14.   padding: 9px;                         /*减少内边距*/
  15.   border-radius: 3px;                   /*减少圆角设置*/
  16. }

值得注意的是，同一个组件的不同类型的样式可以组合在一起使用，比如颜色样式btn-success和尺寸样式btn-lg一起使用完全没有问题，不会引起冲突。看下面的示例：

  1. <button type="button" class="btn btn-success btn-lg">Success</button>