Twitter Bootstrap 3.0现在我如何“重要徽章徽章”
在版本二我可以使用
徽章徽章 – 重要
我发现.badge元素不再具有上下文（-success，-primary等）类。
我如何在版本3中实现相同的function？
例如。 我需要警告徽章和重要的徽章在我的用户界面
只需在CSS中添加这一行代码 ，然后使用引导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>
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交叉授粉的类别不是很好的更新。 我认为这张照片总结了一下：
那些警戒级别并不是devise成带有徽章的。 它用一个“暗示”来表示颜色，但是最终一致性被抛出窗外，可读性是有问题的。 这些警报骇客徽章不具有视觉上的凝聚力。
.label-as-badge解决scheme只是扩展了引导程序devise。 我们保持原始devise师所做的所有决策的完整性，即他们为所有可能颜色的可读性和内聚性以及颜色select本身所给予的考虑。 .label-as-badge类只添加了圆angular，而没有其他的东西。 没有引入颜色定义。 因此，一行CSS。
是的，只需要修改那些.alert-xxxxx类就可以了 – 您不必添加任何 CSS代码。 或者你可以关心更多的小事情，并添加一行。
简而言之：更换badge-important alert-danger或progress-bar-danger 。
它看起来像这样： Bootply Demo 。
您可以将CSS class 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
Alerts Docu： http : //getbootstrap.com/components/#alerts
用class="badges progress-bar-*" （如@ clami219build议）
<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
Progress-Bar Docu： http : //getbootstrap.com/components/#progress-alternatives
Bootstrap 3删除了徽章的颜色选项。 不过，我们可以手动添加这些样式。 这是我的解决scheme，这里是JS斌 ：
.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来创build相同的效果，如…
.badge-important{background-color:#b94a48;}
Bootply
另一种可能的方式是为了使颜色更加强烈，这是一个：
<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's ），那么您可能希望稍微更加dynamic（兑现现有variables），并使用与标签相同的技术创build所有徽章上下文：
// 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 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并为彩色徽章创build自己的类：
.badge-warning { .label-variant(@label-warning-bg); }
其他颜色也一样 只是用危险，成功等来代替警告
那么，这是一个非常晚的答案，但我认为我仍然会把我的两分钱…我可以张贴这个评论，因为这个答案本质上不添加任何新的解决scheme，但它确实增加了职位的价值作为另一种select。 但是在评论中，我不能因为字符限制而给出所有的细节。
注意：这需要编辑引导CSS文件 – 移动.badge上面.badge .label-default样式定义。 由于有限的testing变化，找不到任何实际的副作用。
虽然broc.seib的解决scheme可能是最小的方式来实现OP的要求，最小的CSS添加，但是可以达到相同的效果，没有任何额外的CSS，就像Jens A. Koch的解决scheme或使用.label-xxx上下文类，因为它们比progress-bar-xxx类容易记住。 我不认为.alert-xxx类会产生同样的效果。
所有你需要做的就是一起使用.badge和.badge .label-xxx类（但是按照这个顺序）。 不要忘记在上面的注释中提到的更改。
<a href="#">Inbox <span class="badge label-warning">42</span></a>看起来像这样：
重要提示：如果您决定升级并忘记在新的本地CSS文件中进行更改，此解决scheme可能会破坏您的样式。 我对这个挑战的解决scheme是复制我的自定义CSS文件中的所有.label-xxx样式，并将其加载到所有其他CSS文件之后。 当我使用CDN加载BS3时，这种方法也有帮助。
** PS：**最受好评的答案都有其优点和缺点。 这只是你喜欢做你的CSS的方式，因为没有“唯一正确的方法”来做到这一点。
