如果使用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的对等物应该很简单。

就像上面的答案一样，但这里使用了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的方式，因为没有“唯一正确的方式”去做它。

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

<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

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

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

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

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

它看起来像这样: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