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

Question

在第二版我可以使用

徽章徽章 - 重要

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

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

例如.我想在我的UI中使用警告徽章和重要徽章

Answer 1

总之:更换badge-important用两种alert-danger或progress-bar-danger.

它看起来像这样:Bootply Demo.

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

Progress-Bar Docu: http ://getbootstrap.com/components/#progress-alternatives

Answer 2

只需在CSS中添加这个单行类,并使用bootstrap 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>

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

2014年4月11日:这里有一个关于为什么交叉授粉警报类.badge不是那么好的更新.我想这张图总结了一下:

那些警报类不是为徽章而设计的.它使它们呈现出预期颜色的"暗示",但最终一致性被抛到窗外,可读性值得怀疑.那些警示被攻击的徽章在视觉上没有凝聚力.

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

是的,它更容易被攻击并放入这些.alert-xxxxx类 - 您不必添加任何 CSS行.或者你可以更关心小事情并添加一行.

Answer 3

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

Answer 4

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

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

Bootply

Answer 5

为了使颜色更加强烈,另一种可能的方法是:

<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

Answer 6

如果使用SASS版本(例如:thomas-mcdonald's),那么您可能希望稍微更动态(尊重现有变量)并使用与标签相同的技术创建所有徽章上下文:

// 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等价物应该是直截了当的.

Answer 7

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