在本教程中，我们将学习有关Bootstrap中的标签和徽章的信息。

创建标签

我们使用.label类创建标签，然后使用以下类对它们进行样式设置。

• .label-default为默认标签
• .label-primary主标签
• .label-success成功标签
• .label-info信息标签
• .label-warning警告标签
• .label-danger危险标签

<p>This is the <span class="label label-default">default</span> label.</p>
<p>This is the <span class="label label-primary">primary</span> label.</p>
<p>This is the <span class="label label-success">success</span> label.</p>
<p>This is the <span class="label label-info">info</span> label.</p>
<p>This is the <span class="label label-warning">warning</span> label.</p>
<p>This is the <span class="label label-danger">danger</span> label.</p>

我们甚至可以将标签添加到标题标签，如下所示。

<h1>This is the <span class="label label-default">default</span> label.</h1>
<h2>This is the <span class="label label-primary">primary</span> label.</h2>
<h3>This is the <span class="label label-success">success</span> label.</h3>
<h4>This is the <span class="label label-info">info</span> label.</h4>
<h5>This is the <span class="label label-warning">warning</span> label.</h5>
<h6>This is the <span class="label label-danger">danger</span> label.</h6>

创建徽章

我们使用.badge类来创建徽章。

<p>Total Score: <span class="badge">120</span></p>

<div class="alert alert-success">
  <p>Shopping Cart <span class="badge">2</span></p>
</div>

<div class="alert alert-info">
  <p><a href="#">New orders: <span class="badge">10</span></a></p>
</div>

<button class="btn btn-primary">
  New Mail <span class="badge">5</span>
</button>