Bootstrap 标签

标签（Label）是一小段带背景颜色的文字，用来给内容打上"分类、版本、状态"之类的记号，例如"新品""Beta 版""推荐"。它体积小、不换行，可以嵌在标题、链接或段落文字中间，Bootstrap 通过 .label 配合情景颜色类即可快速生成。

基本用法

给元素加上 .label 后还必须搭配一个情景颜色类，否则标签会失去背景与边框，变得几乎不可见：

<span class="label label-default">默认标签</span>

效果：文字显示在一小块浅灰色的圆角底色上，字号比正文略小、不单独占行。

情景颜色

Bootstrap 内置五种情景颜色，含义与按钮、警告组件中的同名类一致：

<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>

效果：五个小标签的底色分别为深蓝、绿、浅蓝、橙、红，文字均为白色，一眼即可区分不同语义。

在标题中使用

标签经常紧跟标题出现，用来标注版本号或栏目归属：

<h1>示例标题 <span class="label label-default">v2.0</span></h1>

效果：标签与标题显示在同一行，字号会自动缩小到与标题匹配的比例，不会撑破标题高度。

与链接搭配

把标签包在链接里，鼠标移上去时整行会有悬停效果，适合做分类筛选入口：

<a href="#">技术文章 <span class="label label-primary">6 篇</span></a>

效果：文字后跟一个蓝色小标签；悬停链接时文字与标签一起变色，提示这里可以点击。

小结：.label 必须与情景颜色类（default/primary/success/info/warning/danger）搭配使用，适合给文字打"状态记号"；下一节要学的徽章（badge）则更适合显示数字。