在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。

那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。

既然他是一个独立的组件，当然在不同的版本下有不同的文件：

LESS版本：对应的源文件label.less

Sass版本：对应的源文件_label.scss

编译后版本：bootstrap.css文件第4261行～第4327行

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h4>Exampleheading<spanclass="labellabel-default">New</span></h4>

运行效果见右侧结果窗口。

实现原理：

/*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：错误标签，红色

主要是通过这几个类名来修改背景颜色和文本颜色：

<spanclass="labellabel-default">默认标签</span><spanclass="labellabel-primary">主要标签</span><spanclass="labellabel-success">成功标签</span><spanclass="labellabel-info">信息标签</span><spanclass="labellabel-warning">警告标签</span><spanclass="labellabel-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;}徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：

在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。

对应的文件版本：

LESS版本:源文件badges.less

Sass版本：源文件_badges.scss

编译后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<ahref="#">Inbox<spanclass="badge">42</span></a>

运行效果见右侧结果窗口。

实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

/*bootstrap.css文件第4328行～第4341行*/

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

同样也使用:empty伪元素，当没有内容的时候隐藏：

.badge:empty{display:none;}

正如开头所说，可以将徽章与按钮或者导航之类配合使用：

<divclass="navbarnavbar-default"role="navigation">　<divclass="navbar-header">　<ahref="##"class="navbar-brand">慕课网</a>　</div><ulclass="navnavbar-nav"><liclass="active"><ahref="##">网站首页</a></li><li><ahref="##">系列教程</a></li><li><ahref="##">名师介绍</a></li><li><ahref="##">成功案例<spanclass="badge">23</span></a></li><li><ahref="##">关于我们</a></li></ul></div>

运行效果见右侧结果窗口。

按钮和胶囊形导航设置徽章：

另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：

<ulclass="navnav-pills"><liclass="active"><ahref="#">Home<spanclass="badge">42</span></a></li>…<li><ahref="#">Messages<spanclass="badge">3</span></a></li></ul><ulclass="navnav-pillsnav-stacked"><liclass="active"><ahref="#"><spanclass="badgepull-right">42</span>Home</a></li>…<li><ahref="#"><spanclass="badgepull-right">3</span>Messages</a></li></ul><buttonclass="btnbtn-primary"type="button">Messages<spanclass="badge">4</span></button>

运行效果见右侧结果窗口。

样式代码请查看bootstrap.css文件第4345行～第4366行，这20多行代码已从原文中节取出来，放在右侧代码顶部“bootstrap.css”文件中，小伙伴们可以查看。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。