twitter-bootstrap - Twitter Bootstrap 3.0 现在怎么办 "badge badge-important"

Question

在第二版中我可以使用

badge badge-important

我发现 .badge 元素不再具有上下文(-success、-primary 等)类。

如何在版本 3 中实现同样的效果？

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

Answer 1

只需在 CSS 中添加这个单行类，并使用 Bootstrap label组件即可。

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

并排比较此标签和徽章:

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

<小时/>

11/04/2014:以下更新说明了为什么使用 .badge 进行异花授粉警报类效果不佳。我认为这张图概括了这一点:

这些警报类别并不是为与徽章一起设计的。它用预期颜色的“提示”来渲染它们，但最终一致性被抛到了窗外，可读性也受到质疑。这些被警报黑客攻击的徽章在视觉上缺乏凝聚力。

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

是的，直接修改并放入这些 .alert-xxxxx 类会更容易——您不必添加任何 CSS 行。或者您可以更关心一些小事情并添加一行。