4.10　标签

源码文件：label.less

CSS文件：bootstrap.css 4265行之后

在网页排版的时候，我们经常要高亮一些标题里的特殊字符或者整个字符，Bootstrap提供了一个.label样式用于实现高亮的功能。默认情况下高亮效果如图4-59所示。

4.10　标签 - 图1 图4-59　高亮运行效果

应用方式也非常简单，只需要在高亮的地方应用label样式即可。示例如下：

  1. <h1>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h1>
  2. <h2>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h2>
  3. <h3>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h3>
  4. <h4>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h4>
  5. <h5>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h5>
  6. <h6>10个最好的JavaScript动画库和开发框架<span class="label">New</span></h6>

标签样式的实现代码如下（主要是设置背景色和背景方框）：

  1. // 源码4265行
  2. .label {
  3.   display: inline;
  4.   padding: .2em .6em .3em;
  5.   font-size: 75%;
  6.   font-weight: bold;
  7.   line-height: 1;
  8.   color: #fff;
  9.   text-align: center;
  10.   white-space: nowrap;
  11.   vertical-align: baseline;
  12.   border-radius: .25em;
  13. }

另外，label如果作用在链接元素上，hover和focus时的背景颜色会稍微加深10%。源码如下：

  1. // 源码4277行
  2. .label[href]:hover,
  3. .label[href]:focus {
  4.   color: #fff;
  5.   text-decoration: none;
  6.   cursor: pointer;
  7. }
  8. .label:empty {
  9.   display: none;  /*如果元素内没有内容，则隐藏该元素*/
  10. }

和按钮元素Button类似，label样式也提供了多种颜色的支持，分别是成功绿，警示黄、危险红、信息蓝，如图4-60所示。

4.10　标签 - 图2 图4-60　不图颜色样式的标签

.label样式的使用方式如下：

  1. <span class="label label-default">Default</span>
  2. <span class="label label-primary">Primary</span>
  3. <span class="label label-success">Success</span>
  4. <span class="label label-warning">Warning</span>
  5. <span class="label label-danger">Danger</span>
  6. <span class="label label-info">Info</span>

label样式的实现方式是修改背景颜色。主要源码如下：

  1. // 源码4290行
  2. .label-default {  background-color: #999999;}
  3. .label-primary {  background-color: #428bca;}
  4. .label-success {  background-color: #5cb85c;}
  5. .label-info {  background-color: #5bc0de;}
  6. .label-warning {  background-color: #f0ad4e;}
  7. .label-danger {  background-color: #d9534f;}

另外，对于作用域在href链接上的label样式，hover和focus时的背景色也会相应地加深10%。主要代码见Bootstrap4293行。

其实，也可以像.btn一样扩展label的尺寸大小，例如label-lg、label-sm等类似的样式。