Bootstrap源码解读标签、徽章、缩略图和警示框（8）

标签

标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现，可以使用span这样的行内标签，例如：<span class="label">标签</span>
实现源码如下：

.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标签元素来制作标签，实现源码如下：

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

标签内没有内容的时候会被隐藏，实现源码如下：

.label:empty { display: none;}

可以追加颜色样式，类名如下：
.label-deafult:默认标签，深灰色
.label-primary：主要标签，深蓝色
.label-success：成功标签，绿色
.label-info：信息标签，浅蓝色
.label-warning：警告标签，橙色
.label-danger：错误标签，红色

实现代码如下：

.label-default { background-color: #777;}.label-default[href]:hover,.label-default[href]:focus { background-color: #5e5e5e;}.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;}

徽章

徽章效果也是用来做一些提示信息使用，比如显示有几条未读消息。使用“.badge”样式来实现。可以使用span标签来制作，例如：<a href="#">未读消息<span class="badge">3</span></a>
实现源码如下：

.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #777; border-radius: 10px;}

当没有内容的时候隐藏，实现源码如下：

.badge:empty {
  display: none;
}

徽章可以与按钮或者导航之类配合使用，实现源码如下：

.btn .badge { position: relative; top: -1px;}.btn-xs .badge { top: 0; padding: 1px 5px;}a.badge:hover,a.badge:focus { color: #fff; text-decoration: none; cursor: pointer;}a.list-group-item.active > .badge,.nav-pills > .active > a > .badge { color: #428bca; background-color: #fff;}.nav-pills > li > a > .badge { margin-left: 3px;}