3.6.1　按钮样式

按钮是网页交互过程中不可缺少的一部分，Bootstrap默认提供了7种样式的按钮风格，其效果如图3-29所示。

3.6.1　按钮样式 - 图1 图3-29　按钮样式运行效果

使用方式如下：

  1.     <!-- 标准button -->
  2.     <button type="button" class="btn btn-default">Default</button>
  3.     <!-- 提供视觉加重，表示在一组button中，该按钮是最主要的button -->
  4.     <button type="button" class="btn btn-primary">Primary</button>
  5.     <!-- 表示成功或正使用的button -->
  6.     <button type="button" class="btn btn-success">Success</button>
  7.     <!-- 表示提示信息的button -->
  8.     <button type="button" class="btn btn-info">Info</button>
  9.     <!-- 表示需要进行某种行为的button -->
  10.     <button type="button" class="btn btn-warning">Warning</button>
  11.     <!-- 表示危险或错误行为的button -->
  12.     <button type="button" class="btn btn-danger">Danger</button>
  13.     <!-- 让button的行为看起来像链接一样 -->
  14.     <button type="button" class="btn btn-link">Link</button>

和第2章里的CSS设计思想讲述的一样，按钮风格首先定义了基础的.btn样式以及相关的hover、focus、active等行为特效，然后再为特殊的风格（如，btn-default）定义特殊的颜色（如，各种变化状态下的颜色）。.btn基础样式部分代码如下：

  1. // 源码1988行
  2. .btn {
  3.   display: inline-block;                        /* inline模式*/
  4.   padding: 6px 12px;
  5.   margin-bottom: 0;
  6.   font-size: 14px;
  7.   font-weight: normal;
  8.   line-height: 1.428571429;
  9.   text-align: center;
  10.   white-space: nowrap;
  11.   vertical-align: middle;
  12.   cursor: pointer;                      /* 手形图标 */
  13.   -webkit-user-select: none;
  14.      -moz-user-select: none;
  15.       -ms-user-select: none;
  16.        -o-user-select: none;
  17.           user-select: none;
  18.   background-image: none;
  19.   border: 1px solid transparent;        /* 边框 */
  20.   border-radius: 4px;                   /* 圆角*/
  21. }

另外，基础样式也会对按钮默认的focus、active、hover、disabled行为定义相关的变化。详见源码2008～2034行。

特殊风格相关代码（以btn-default为例）如下：

  1. // 源码2035行
  2. .btn-default { /* 定义default风格相关的颜色 */
  3.   color: #333;
  4.   background-color: #fff;
  5.   border-color: #ccc;
  6. }
  7. .btn-default:hover,
  8. .btn-default:focus,
  9. .btn-default:active,
  10. .btn-default.active,
  11. .open .dropdown-toggle.btn-default {  /* hover、focus、active变化时的颜色 */
  12.   color: #333;
  13.   background-color: #ebebeb;
  14.   border-color: #adadad;
  15. }
  16. .btn-default:active,
  17. .btn-default.active,
  18. .open .dropdown-toggle.btn-default {  /* active状态下,背景图设置为none */
  19.   background-image: none;
  20. }
  21. .btn-default.disabled,
  22. .btn-default[disabled],
  23. /* 此处省略部分选择符 */
  24. .btn-default[disabled].active,
  25. fieldset[disabled] .btn-default.active {  /* 禁用状态下,各种变化时的颜色 */
  26.   background-color: #fff;
  27.   border-color: #ccc;
  28. }
  29. .btn-default .badge {  /* 按钮内部有徽章的话,设置徽章的显示颜色和背景色 */
  30.   color: #fff;
  31.   background-color: #333;
  32. }

同理，其他6种按钮样式也是按照上述规则进行定义的，只是颜色变化不同而已。所以如果需要定义自己的风格，遵循上述规则即可。

注意

关于在按钮上应用不同主题的介绍，请参考第5章5.9节的内容。