在一些Web頁面中常常會添加一個標簽用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標簽，來告訴用戶。這是新添加的導航項。如下圖所示：

那么在Bootstrap框架中特意將這樣的效果提取出來成為一個標簽組件，并且以“.label”樣式來實現高亮顯示。

既然他是一個獨立的組件，當然在不同的版本下有不同的文件：

   ?   LESS版本：對應的源文件label.less

   ?   Sass版本：對應的源文件_label.scss

   ?   編譯后版本：bootstrap.css文件第4261行～第4327行

使用原理：

使用方法很簡單，你可以在使用span這樣的行內標簽：

<h3>Example heading <span class="label label-default">New</span></h3>

運行效果見右側結果窗口。

實現原理：

/*bootstrap.css文件第4261行～第4272行*/

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}

如果使用的是a標簽元素來制作的話，為了讓其更美觀，在hover狀態去掉下劃線之類：

/*bootstrap.css文件第4273行～4278行*/

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}

有的時候標簽內沒有內容的時候，可以借助CSS3的:empty偽元素將其隱藏：

.label:empty {
display: none;
}

顏色樣式設置：

和按鈕元素button類似，label樣式也提供了多種顏色：

  ?   label-deafult:默認標簽，深灰色

  ?   label-primary：主要標簽，深藍色

  ?   label-success：成功標簽，綠色

  ?   label-info：信息標簽，淺藍色

  ?   label-warning：警告標簽，橙色

  ?   label-danger：錯誤標簽，紅色

主要是通過這幾個類名來修改背景顏色和文本顏色：

<span class="label label-default">默認標簽</span>
<span class="label label-primary">主要標簽</span>
<span class="label label-success">成功標簽</span>
<span class="label label-info">信息標簽</span>
<span class="label label-warning">警告標簽</span>
<span class="label label-danger">錯誤標簽</span>

運行效果見右側結果窗口。

顏色實現原理：

/*bootstrap.css文件第4286行～第4237行*/

.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}