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

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

引导

如果使用SASS版本(例如:thomas-mcdonald's的版本)，那么你可能想要稍微更加动态(尊重现有变量)，并使用与标签相同的技术创建所有徽章上下文:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

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

.badge-danger {
  @include label-variant($label-danger-bg);
}

LESS的对等物应该很简单。

Bootstrap 3删除了徽章的颜色选项。但是，我们可以手动添加这些样式。这是我的解决方案，这是JS Bin:

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

简而言之:用警告-危险或进度条-危险替换徽章-重要。

它看起来像这样:Bootply Demo。

你可以将CSS类徽章与alert-*或progress -bar-*结合起来为它们着色:

与class="徽章警报-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

警报文档：http://getbootstrap.com/components/#alerts

用class="badges progress-bar-*"(根据@clami219的建议)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

进度条文档:http://getbootstrap.com/components/#progress-alternatives

当使用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

只需在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行。或者你可以多关心一些小事，加一行。

就像上面的答案一样，但这里使用了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文件-将.badge的样式定义移到.label-default之上。在我有限的测试中，没有发现任何实际的副作用。

而气息。seib的解决方案可能是用最少的CSS实现OP需求的最好方法，它可以在没有任何额外CSS的情况下达到相同的效果，就像Jens A. Koch的解决方案或使用.label-xxx上下文类，因为与progress-bar-xxx类相比，它们更容易记住。我不认为.alert-xxx类会产生同样的效果。

你所要做的就是在一起使用.badge和.label-xxx类(但是按照这个顺序)。不要忘记做上面注释中提到的更改。

<a href="#">Inbox <span class="badge label-warning">42</span></a>看起来是这样的:

重要提示:如果您决定升级并忘记在新的本地CSS文件中进行更改，此解决方案可能会破坏您的样式。我对这个挑战的解决方案是在我的自定义CSS文件中复制所有.label-xxx样式，并在所有其他CSS文件之后加载它。当我使用CDN加载BS3时，这种方法也有帮助。

* * P。S: **两个排名靠前的答案都有他们的优点和缺点。这只是你喜欢做你的CSS的方式，因为没有“唯一正确的方式”去做它。