twitter-bootstrap – Twitter Bootstrap 3.0如何“徽章徽章 – 重要”现在

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Twitter Bootstrap 3.0如何“徽章徽章 – 重要”现在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在版本二我可以使用

badge badge-important

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

我如何在版本3中实现相同的事情?

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

解决方法

只需在CSS中添加这一行类,并使用引导标签组件。
.label-as-badge {
    border-radius: 1em;
}

将此标签和徽章并排比较:

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

它们看起来是一样的。但在CSS中,标签使用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>

11/04/2014:这里有一个更新为什么交叉授粉警报类与.badge不是那么伟大。我认为这幅画总结起来:

这些警报类别不是设计与徽章。它渲染它们与想要的颜色的“提示”,但在最终的一致性被抛出了窗口和可读性是有问题的。那些警报骇客的徽章不具有视觉上的凝聚力。

.label-as-badge解决方案只是扩展了引导程序设计。我们保留了bootstrap设计师做出的所有决策,即他们为所有可能的颜色提供可读性和凝聚力的考虑,以及颜色选择本身。 .label-as-badge类只添加圆角,没有其他。没有引入颜色定义。因此,一行CSS。

是的,它是更容易砍掉和放弃那些.alert-xxxxx类 – 你不必添加任何行的CSS。或者你可以关心更多的小事情,并添加一行。

猜你在找的Bootstrap相关文章