就像上面的答案一样，但这里使用了3个名字和颜色:

/*css为徽章添加颜色，并使用颜色*/ .badge-default { background - color: # 999999; } .badge-primary { background - color: # 428 bca; } .badge-success { background - color: # 5 cb85c; } .badge-info { background - color: # 5 bc0de; } .badge-warning { background - color: # f0ad4e; } .badge-danger { background - color: # d9534f; }

只需在CSS中添加这个单行类，并使用bootstrap标签组件。

.label-as-badge {
    border-radius: 1em;
}

将此标签和徽章并排比较:

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

它们看起来一样。但是在CSS中，label使用em，所以它可以很好地缩放，并且它仍然有所有的“-color”类。因此，标签将更好地缩放到更大的字体大小，并且可以使用标签成功(label-success)、标签警告(label-warning)等进行着色。这里有两个例子:

<span class="label label-success label-as-badge">Yay! Rah!</span>

或者东西更大的地方:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

11/16/2015:看看我们如何在Bootstrap 4中做到这一点

看起来。badge类完全消失了。但是(这里)有一个内置的.label-pill类，看起来就是我们想要的。

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

在实际使用中是这样的:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

11/04/2014:这是关于为什么用.badge交叉授粉的警报类不是那么好的更新。我认为这张照片总结了这一点:

那些警戒类并不是设计来配警徽的。它以预期颜色的“暗示”渲染它们，但最终一致性被抛出窗外，可读性也有问题。那些警告被黑的徽章在视觉上没有凝聚力。

.label-as-badge解决方案只是扩展了引导设计。我们保留了自举设计师做出的所有决策，即他们考虑到所有可能的颜色的可读性和凝聚力，以及颜色选择本身。label-as-badge类只添加圆角，其他什么也不添加。没有介绍颜色定义。因此，只有一行CSS。

是的，这是更容易的，只是hack away和删除那些.alert-xxxxx类-你不需要添加任何CSS行。或者你可以多关心一些小事，加一行。

徽章的上下文类确实从Bootstrap 3中删除了，所以你必须添加一些自定义CSS来创建相同的效果，如…

.badge-important{background-color:#b94a48;}

引导

当使用LESS版本时，你可以导入mixin。为彩色徽章创建自己的类:

.badge-warning {
    .label-variant(@label-warning-bg);
}

其他颜色也一样;只要把警告换成危险、成功等。

另一种可能的方法，为了让颜色更强烈一点，是这样的:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

看到bootp

就像上面的答案一样，但这里使用了3个名字和颜色:

/*css为徽章添加颜色，并使用颜色*/ .badge-default { background - color: # 999999; } .badge-primary { background - color: # 428 bca; } .badge-success { background - color: # 5 cb85c; } .badge-info { background - color: # 5 bc0de; } .badge-warning { background - color: # f0ad4e; } .badge-danger { background - color: # d9534f; }