在第二个版本中我可以使用
徽章badge-important
我发现.badge元素不再有上下文类(-success，-primary，等等)。
我如何在版本3中实现同样的事情?
如。我想警告徽章和重要的徽章在我的UI
当前回答
嗯，这是一个非常晚的回答，但我想我仍然会发表我的意见……我本可以把这个作为评论发布，因为这个答案本质上没有添加任何新的解决方案，但它确实为帖子增加了价值，作为另一种选择。但在评论中，由于字符限制，我无法给出所有的细节。
注意:这需要一个编辑来引导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的方式，因为没有“唯一正确的方式”去做它。
其他回答
就像上面的答案一样，但这里使用了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; }
简而言之:用警告-危险或进度条-危险替换徽章-重要。
它看起来像这样: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
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;
}
嗯，这是一个非常晚的回答，但我想我仍然会发表我的意见……我本可以把这个作为评论发布，因为这个答案本质上没有添加任何新的解决方案，但它确实为帖子增加了价值，作为另一种选择。但在评论中，由于字符限制，我无法给出所有的细节。
注意:这需要一个编辑来引导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
