[b]1、标签[/b] 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示： [img]http://files.jb51.net/file_images/article/201511/20151127145840602.jpg?20151027145851[/img] 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。 既然他是一个独立的组件，当然在不同的版本下有不同的文件： [b]☑ LESS版本：[/b]对应的源文件label.less [b]☑ Sass版本：[/b]对应的源文件_label.scss [b]☑ 编译后版本：[/b]bootstrap.css文件第4261行～第4327行 [b]1）、使用原理：[/b] 使用方法很简单，你可以在使用span这样的行内标签： 运行效果: [img]http://files.jb51.net/file_images/article/201511/20151127150324824.jpg?2015102715333[/img] [b]1）、实现原理：[/b] 主要将其设置为椭圆形，并且加了一个背景色： /bootstrap.css文件第4328行～第4341行/ 同样也使用`:empty`伪元素，当没有内容的时候隐藏： 正如开头所说，可以将徽章与按钮或者导航之类配合使用： 运行效果 [img]http://files.jb51.net/file_images/article/201511/20151127150527566.jpg?2015102715536[/img] [b]2）、按钮和胶囊形导航设置徽章：[/b] 另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：  运行效果: [img]http://files.jb51.net/file_images/article/201511/20151127150550134.jpg?201510271561[/img] 样式代码请查看bootstrap.css文件第4345行～第4366行。 注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。 通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。 如果大家还想深入学习，可以点击这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]