221

在第二版中我可以使用

徽章徽章-重要

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

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

例如。我想要在我的 UI 中显示警告徽章和重要徽章

4

9 回答 9

264

只需在您的 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类（here） 。

.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 行。或者您可以更关心小事并添加一行。

于 2014-10-21T19:47:43.153 回答
256

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

它看起来像这样：Bootply 演示。

您可以将 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

于 2014-02-22T15:49:30.817 回答
45

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;
}
于 2013-12-15T04:03:02.730 回答
25

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

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

引导层

于 2013-09-11T01:51:43.080 回答
20

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

<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

于 2014-09-04T16:19:19.343 回答
18

如果使用 SASS 版本（例如：thomas-mcdonald's one），那么您可能希望稍微动态一些（尊重现有变量）并使用与标签相同的技术创建所有徽章上下文：

// 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 等价物应该很简单。

于 2013-11-14T01:54:46.367 回答
5

像上面的答案一样，但这里使用的是 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;
}

于 2015-09-10T22:50:44.407 回答
2

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

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

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

于 2014-05-17T17:12:57.170 回答
2

好吧，这是一个非常晚的答案，但我想我仍然会投入两分钱......我本可以将其发布为评论，因为这个答案本质上并没有添加任何新的解决方案，但它确实为帖子增加了价值作为另一种选择。但在评论中，由于字数限制，我无法提供所有详细信息。

注意：这需要编辑引导 CSS 文件 - 移动.badge上述样式定义.label-default。由于我有限的测试发生了变化，找不到任何实际的副作用。

虽然broc.seib 的解决方案可能是实现 OP 要求的最佳方式，而对 CSS 的添加最少，但完全不需要任何额外的 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>看起来像这样：

带有警告 bg 的徽章

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

**PS：** 评分最高的答案各有利弊。这只是你喜欢做 CSS 的方式，因为没有“唯一正确的方式”来做。

于 2015-11-14T21:18:46.360 回答