3.6.2　按钮大小

像input一样，Bootstrap也提供了控制button按钮大小的CSS样式。在2.x系列时提供了3种样式：.btn-large、.btn-small、btn-mini。当前最新版本将这些样式改名为.btn-lg、.btn-sm、.btn-xs。这些样式可以和btn颜色样式组合使用。示例如下：

  1. <p>
  2.     <button type="button" class="btn btn-default btn-lg">大型button</button>
  3.     <button type="button" class="btn btn-primary btn-lg">大型button</button>
  4. </p>
  5. <p>
  6.     <button type="button" class="btn btn-success">正常button</button>
  7.     <button type="button" class="btn btn-info">正常button</button>
  8. </p>
  9. <p>
  10.     <button type="button" class="btn btn-success btn-sm">小型button</button>
  11.     <button type="button" class="btn btn-info btn-sm">小型button</button>
  12. </p>
  13. <p>
  14.     <button type="button" class="btn btn-warning btn-xs">超小button</button>
  15.     <button type="button" class="btn btn-danger btn-xs">超小button</button>
  16. </p>

运行上述示例后的效果如图3-30所示。

3.6.2　按钮大小 - 图1 图3-30　不同尺寸和不同颜色按钮的运行效果

这些不同尺寸按钮的主要差别是padding、font-size、line-height和border-radius，具体源码里的数值如下：

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

讲述到这里，我们发现一个问题，所有按钮的宽度都是根据文本的长短（再加上padding值）来决定的，而如果我们需要一个充满父容器的100%宽度的按钮，则无法实现。好在Bootstrap又单独为我们提供了一个block级的样式——.btn-block按钮，它不以文本多少自动伸缩，它没有padding和margin值，而是充满父容器。具体源码实现如下：

  1. // 源码2332行
  2. .btn-block {  /* 取消padding*/
  3.   display: block;
  4.   width: 100%;
  5.   padding-right: 0;
  6.   padding-left: 0;
  7. }
  8. .btn-block + .btn-block {
  9.   margin-top: 5px;  /* 多个按钮之间取消上下间隔*/
  10. }
  11. input[type="submit"].btn-block,
  12. input[type="reset"].btn-block,
  13. input[type="button"].btn-block {
  14.   width: 100%;  /* 各种input按钮的宽度也要充满父容器*/
  15. }

.btn-block样式和普通按钮的区别如图3-31所示。可以看出块级元素充满父容器，而不随字符宽度变化而变化。

3.6.2　按钮大小 - 图2 图3-31　.btn-block按钮的运行效果