twitter-bootstrap Twitter Bootstrap 3.0 我现在如何“标记徽章-重要”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18730116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3.0 how do I "badge badge-important" now
提问by Peter
In version two I could use
在第二版中我可以使用
badge badge-important
徽章徽章-重要
I see that the .badge element no longer has contextual (-success,-primary,etc..) classes.
我看到 .badge 元素不再具有上下文（-success、-primary 等）类。
How do i achieve the same thing in version 3?
我如何在版本 3 中实现相同的功能？
Eg. I want warning badges and important badges in my UI
例如。我想要在我的 UI 中显示警告徽章和重要徽章
回答by broc.seib
Just add this one-lineclass in your CSS, and use the bootstrap labelcomponent.
只需在您的 CSS 中添加这个单行类，并使用引导程序label组件。
.label-as-badge {
border-radius: 1em;
}
Compare this labeland badgeside by side:
比较这个label和badge并排：
<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>
They appear the same. But in the CSS, labeluses emso it scales nicely, and it still has all the "-color" classes. So the label will scale to bigger font sizes better, and can be colored with label-success, label-warning, etc. Here are two examples:
他们看起来是一样的。但是在 CSS 中，labelusesem可以很好地缩放，并且它仍然具有所有“-color”类。因此标签将更好地缩放到更大的字体大小，并且可以使用标签成功、标签警告等进行着色。以下是两个示例：
<span class="label label-success label-as-badge">Yay! Rah!</span>
Or where things are bigger:
或者事情更大的地方：
<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: Looking at how we'll do this in Bootstrap 4
11/16/2015：看看我们将如何在 Bootstrap 4 中做到这一点
Looks like .badgeclasses are completely gone. But there's a built-in .label-pillclass (here)that looks like what we want.
看起来.badge课程完全消失了。但是有一个内置.label-pill类（这里）看起来像我们想要的。
.label-pill {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
In use it looks like this:
在使用中它看起来像这样：
<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: Here's an update on why cross-pollinating alert classes with .badgeis not so great. I think this picture sums it up:
2014 年 4 月 11 日：这里更新了为什么异花授粉警报类.badge不是那么好。我认为这张图总结了它：
Those alert classes were not designed to go with badges. It renders them with a "hint" of the intended colors, but in the end consistency is thrown out the window and readability is questionable. Those alert-hacked badges are not visually cohesive.
那些警报类不是为了与徽章一起设计的。它用预期颜色的“提示”呈现它们，但最终一致性被抛到了窗外，可读性值得怀疑。那些被警报攻击的徽章在视觉上没有凝聚力。
The .label-as-badgesolution is only extending the bootstrap design. We are keeping intact all the decision making made by the bootstrap designers, namely the consideration they gave for readability and cohesion across all the possible colors, as well as the color choices themselves. The .label-as-badgeclass only adds rounded corners, and nothing else. There are no color definitions introduced. Thus, a single line of CSS.
该.label-as-badge解决方案仅延长引导设计。我们保持引导程序设计师所做的所有决策的完整性，即他们对所有可能颜色的可读性和凝聚力以及颜色选择本身的考虑。这个.label-as-badge类只添加圆角，没有别的。没有引入颜色定义。因此，一行 CSS。
Yep, it is easier to just hack away and drop in those .alert-xxxxxclasses -- you don't have to add anylines of CSS. Or you couldcare more about the little things and add one line.
是的，直接删除并删除这些.alert-xxxxx类会更容易——您不必添加任何CSS 行。或者你可以更关心小事情并添加一行。
回答by Jens A. Koch
In short: Replace badge-importantwith either alert-dangeror progress-bar-danger.
简而言之：替换badge-important为alert-danger或progress-bar-danger。
It looks like this: Bootply Demo.
它看起来像这样：Bootply 演示。
You might combine the CSS class badgewith alert-*or progess-bar-*to color them:
您可以将 CSS 类badge与alert-*或结合起来为progess-bar-*它们着色：
With class="badges alert-*"
和 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
警报文档：http : //getbootstrap.com/components/#alerts
With class="badges progress-bar-*"(as suggested by @clami219)
使用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
Progress-Bar Docu:http://getbootstrap.com/components/#progress-alternatives
进度条文档：http : //getbootstrap.com/components/#progress-alternatives
回答by Adams.H
Bootstrap 3 removed those color options for badges. However, we can add those styles manually. Here's my solution, and here is the JS Bin:
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;
}
回答by Zim
回答by clami219
Another possible way, in order to make the colors a bit more intense, is this one:
为了使颜色更强烈，另一种可能的方法是：
<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>
See Bootply
参见Bootply
回答by PowerKiKi
If using a SASS version (eg: thomas-mcdonald's one), then you may want to be slightly more dynamic (honor existing variables) and create all badge contexts using the same technique as used for labels:
如果使用 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);
}
The LESS equivalent should be straightforward.
LESS 等价物应该很简单。
回答by jumptiger13
Like the answer above but here is using bootstrap 3 names and colours:
就像上面的答案，但这里使用的是 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;
}回答by Fr0zenFyr
Well, this is a terribly late answer but I think I'll still put my two cents in... I could have posted this as a comment because this answer doesn't essentially add any new solution but it does add value to the post as yet another alternative. But in a comment I wouldn't be able to give all the details because of character limit.
嗯，这是一个非常晚的答案，但我想我仍然会投入我的两分钱......我可以将其作为评论发布，因为这个答案基本上没有添加任何新的解决方案，但它确实为帖子增加了价值作为另一种选择。但是在评论中，由于字符限制，我无法提供所有详细信息。
NOTE: This needs an edit to bootstrap CSS file - move style definitions for .badgeabove .label-default. Couldn't find any practical side effects due to the change in my limited testing.
注意：这需要编辑来引导 CSS 文件 - 移动.badge上面的样式定义.label-default。由于我有限的测试中的变化，找不到任何实际的副作用。
While broc.seib's solutionis probably the best way to achieve the requirement of OP with minimal addition to CSS, it is possible to achieve the same effect without any extra CSS at all just like Jens A. Koch's solutionor by using .label-xxxcontextual classes because they are easy to remember compared to progress-bar-xxxclasses. I don't think that .alert-xxxclasses give the same effect.
虽然broc.seib 的解决方案可能是通过对 CSS 的最少添加来实现 OP 要求的最佳方法，但完全可以在没有任何额外 CSS 的情况下实现相同的效果，就像Jens A. Koch 的解决方案或使用.label-xxx上下文类一样，因为它们与progress-bar-xxx类相比更容易记住。我认为这些.alert-xxx课程不会产生相同的效果。
All you have to do is just use .badgeand .label-xxxclasses together (but in this order). Don't forget to make the changes mentioned in NOTE above.
您所要做的就是一起使用.badge和.label-xxx类（但按此顺序）。不要忘记进行上面注释中提到的更改。
<a href="#">Inbox <span class="badge label-warning">42</span></a>looks like this:
<a href="#">Inbox <span class="badge label-warning">42</span></a>看起来像这样：
IMPORTANT: This solution may break your styles if you decide to upgrade and forget to make the changes in your new local CSS file. My solution for this challenge was to copy all .label-xxxstyles in my custom CSS file and load it after all other CSS files. This approach also helps when I use a CDN for loading BS3.
重要提示：如果您决定升级并忘记在新的本地 CSS 文件中进行更改，此解决方案可能会破坏您的样式。我对这个挑战的解决方案是复制.label-xxx我的自定义 CSS 文件中的所有样式，并在所有其他 CSS 文件之后加载它。当我使用 CDN 加载 BS3 时，这种方法也有帮助。
**P.S: ** Both the top rated answers have their pros and cons. It's just the way you prefer to do your CSS because there is no "only correct way" to do it.
**PS：** 评分最高的答案各有利弊。这只是您更喜欢使用 CSS 的方式，因为没有“唯一正确的方法”可以做到。
回答by ThiefMaster
When using the LESS version you can import mixins.less and create your own classes for colored badges:
使用 LESS 版本时，您可以导入 mixins.less 并为彩色徽章创建自己的类：
.badge-warning {
.label-variant(@label-warning-bg);
}
Same for the other colors; just replace warning with danger, success, etc.
其他颜色相同；只需用危险、成功等替换警告。
