在第二版中，我可以使用

徽章徽章重要

我看到.badge元素不再具有上下文（-成功，-primary等）类。

我如何在版本3中实现相同的目的？

例如。我想在用户界面中使用警告标志和重要标志

只需在CSS中添加这一行类，然后使用bootstrap label组件即可。

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

比较这label与badge并排：

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

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

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

2015年11月16日：了解如何在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>

2014年11月4日：这是有关为什么使用异花授粉警报类.badge不太好的更新。我认为这张图片总结起来：

这些警报类并非设计为带有徽章。它使它们具有预期颜色的“提示”，但是最终一致性被扔到了窗外，可读性令人怀疑。那些机敏的黑徽章在视觉上没有凝聚力。

该.label-as-badge解决方案仅扩展了引导程序设计。我们会保持自举程序设计师所做的所有决定，即他们考虑所有可能的颜色的可读性和内聚性以及颜色选择本身的考虑。本.label-as-badge类只增加了圆角，而不是其他。没有引入颜色定义。因此，只有一行CSS。

是的，只需要简单地砍掉并放下这些.alert-xxxxx类就容易了-您不必添加任何 CSS行。或者，您可以更多地关注小事情并添加一行。

简而言之：替换badge-important为alert-danger或progress-bar-danger。

它看起来像这样：Bootply Demo。

您可以将CSS类badge与alert-*或progess-bar-*一起着色：

用 class="badges alert-*"

  <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

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

的上下文类badge确实已从Bootstrap 3中删除，因此您必须添加一些自定义CSS来创建相同的效果，例如...

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

自举

为了使颜色更鲜艳，另一种可能的方法是：

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

参见Bootply

如果使用的是SASS版本（例如thomas-mcdonald的版本），那么您可能希望变得更具动态性（荣誉已有的变量），并使用与标签相同的技术来创建所有徽标上下文：

// 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名称和颜色：

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}

使用LESS版本时，您可以导入mixins.less并为彩色徽章创建自己的类：

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

其他颜色相同；只是将警告替换为危险，成功等。

好吧，这是一个很晚才回答的问题，但我想我还是会花两分钱……我可以将其发布为评论，因为该回答本质上并没有添加任何新的解决方案，但确实为该帖子增加了价值作为另一种选择。但是在评论中，由于字符限制，我无法提供所有详细信息。

注意：这需要进行编辑以引导CSS文件移动样式定义.badge如上.label-default。由于我的有限测试的更改，找不到任何实际的副作用。

虽然broc.seib的解决方案可能是满足OP要求且对CSS的添加最少的最佳方法，但就像Jens A. Koch的解决方案或使用.label-xxx上下文类一样，完全不需要任何额外的CSS即可达到相同的效果，因为它们与progress-bar-xxx班级相比，很容易记住。我认为.alert-xxx类不会产生相同的效果。

您所要做的只是一起使用.badge和.label-xxx类（但按此顺序）。别忘了进行上面的注释中提到的更改。

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

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

** PS：**评分最高的答案都有其优点和缺点。这只是您喜欢使用CSS的方式，因为没有“唯一正确的方式”可以做到这一点。