Bootstrap 标签和徽章

标签和徽章

Bootstrap提供的各种标签和徽章，它们非常适合显示计数结果、提示信息等内容。标签和徽章的风格及实现方法基本相同，唯一不同的就是徽章以圆角显示。

Bootstrap为标签和徽章设计了两套样式，标签的基本样式通过 .label 样式类实现，徽章的基本样式通过 .badge 样式类实现。两套样式的外观基本相同，不同的是标签以圆角矩形呈现，而徽章以椭圆形呈现。

除基本样式外，Bootstrap还为标签和徽章提供了一组情景样式类，用来设置它们的背景颜色，以便在不同上下文中搭配合适的色彩。

标签相关的情景类应用示例及其效果见表 4‑1：

表 4‑1 标签相关的情景类

名称	示例	标记
Default	Default	Default
Success	Success	Success
Warning	Warning	Warning
Important	Important	Important
Info	Info	Info
Inverse	Inverse	Inverse

徽章相关的情景类应用示例及其效果见表 4‑2：

表 4‑2 徽章相关的情景类

名称	示例	标记
Default	1	1
Success	2	2
Warning	4	4
Important	6	6
Info	8	8
Inverse	10	10

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。