Twitter Bootstrap 3.0我现在如何“徽章重要”

时间:2013-09-10 23:03:36

标签: twitter-bootstrap twitter-bootstrap-3

在第二版中,我可以使用

  

徽章徽章 - 重要

我看到.badge元素不再具有上下文(-success,-primary等)类。

我如何在版本3中实现相同的功能?

EG。我想在我的UI中使用警告徽章和重要徽章

9 个答案:

答案 0 :(得分:252)

简而言之:将badge-important替换为alert-dangerprogress-bar-danger

看起来像这样: Bootply Demo


您可以将CSS类badgealert-*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

答案 1 :(得分:252)

只需在CSS中添加此单行类,然后使用引导程序label组件。

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

并排比较labelbadge

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

enter image description here

它们看起来是一样的。但是在CSS中,label使用em因此它可以很好地扩展,并且它仍然具有所有&#34; -color&#34;类。因此,标签将更好地扩展到更大的字体大小,并且可以通过标签成功,标签警告等进行着色。以下是两个示例:

<span class="label label-success label-as-badge">Yay! Rah!</span>

enter image description here

或者事情变得更大:

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

enter image description here


2015年11月16日:了解我们将如何在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>

enter image description here


2014年11月4日:以下是有关为.badge进行异花粉报警级别的原因的最新消息。我想这张照片总结了一下:

enter image description here

这些警报类并非设计用于徽章。它使用#34;提示&#34;预期的颜色,但最终一致性被抛出窗口,可读性是有问题的。那些被警示破坏的徽章在视觉上没有凝聚力。

.label-as-badge解决方案只是扩展了引导程序设计。我们完整地保留了自举设计师做出的所有决策,即他们对所有可能颜色的可读性和内聚性的考虑,以及颜色选择本身。 .label-as-badge类只添加圆角,而不添加其他任何内容。没有引入颜色定义。因此,单行CSS。

是的,您可以更轻松地删除并放入.alert-xxxxx个类 - 您不必添加任何 CSS行。或者你可以更关心小事情并添加一行。

答案 2 :(得分:44)

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

答案 3 :(得分:25)

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

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

Bootply

答案 4 :(得分: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

答案 5 :(得分: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等价物应该是直截了当的。

答案 6 :(得分: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;
}

答案 7 :(得分:2)

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

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

其他颜色相同;只需用危险,成功等取代警告

答案 8 :(得分:2)

嗯,这是一个非常迟到的答案,但我想我仍然会把我的两分钱......我可以把它作为评论发布,因为这个答案基本上没有添加任何新的解决方案,但它确实增加了价值作为另一种选择的职位。但是在评论中,由于字符限制,我无法提供所有细节。

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

虽然broc.seib's solution可能是实现OP要求的最佳方式,但CSS的添加量最少,但是可以在没有任何额外CSS的情况下实现相同的效果,例如Jens A. Koch's solution或使用.label-xxx上下文类,因为与progress-bar-xxx类相比,它们易于记忆。我不认为.alert-xxx类会产生同样的效果。

您所要做的就是一起使用.badge.label-xxx个类(但按此顺序)。不要忘记进行上面注意中提到的更改。

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

Badge with warning bg

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

** P.S:**最受好评的答案都有其优缺点。这就是你喜欢做CSS的方式,因为没有“唯一正确的方法”来做。