Twitter Bootstrap 3.0 我如何“徽章徽章-重要"现在 [英] Twitter Bootstrap 3.0 how do I "badge badge-important" now

问题描述

在第二版中我可以使用

<块引用>

徽章徽章-重要

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

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

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

解决方案

只需在您的 CSS 中添加这个 单行 类，并使用引导程序 label 组件.

.label-as-badge {边界半径:1em；}

并排比较这个label和badge:

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

它们看起来一样.但是在 CSS 中，label 使用 em，因此它可以很好地缩放，并且它仍然具有所有-color"类.因此标签会更好地缩放到更大的字体大小，并且可以使用标签成功、标签警告等进行着色.以下是两个示例:

 耶！啊！</span>

或者事情更大的地方:

<div style="font-size: 36px"><!-- 假装一个封闭的类有大字体--><span class="label label-success label-as-badge">耶！啊！</span>

<小时>

11/16/2015:看看我们将如何在 Bootstrap 4 中做到这一点

看起来 .badge 类已经完全消失了.但是有一个内置的 .label-pill 类

<小时>

11/04/2014:这里更新了为什么使用 .badge 的异花授粉警报类不是那么好.我认为这张图片总结了它:

那些警报类的设计并非与徽章搭配使用.它用预期颜色的提示"呈现它们，但最终一致性被抛出窗外，可读性值得怀疑.那些被警报攻击的徽章在视觉上没有连贯性.

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

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

In version two I could use

badge badge-important

I see that the .badge element no longer has contextual (-success,-primary,etc..) classes.

How do i achieve the same thing in version 3?

Eg. I want warning badges and important badges in my UI

解决方案

Just add this one-line class in your CSS, and use the bootstrap label component.

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

Compare this label and badge side by side:

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

They appear the same. But in the CSS, label uses em so it scales nicely, and it still has all the "-color" classes. So the label will scale to bigger font sizes better, and can be colored with label-success, label-warning, etc. Here are two examples:

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

Or where things are bigger:

<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: Looking at how we'll do this in Bootstrap 4

Looks like .badge classes are completely gone. But there's a built-in .label-pill class (here) that looks like what we want.

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

In use it looks like this:

<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: Here's an update on why cross-pollinating alert classes with .badge is not so great. I think this picture sums it up:

Those alert classes were not designed to go with badges. It renders them with a "hint" of the intended colors, but in the end consistency is thrown out the window and readability is questionable. Those alert-hacked badges are not visually cohesive.

The .label-as-badge solution is only extending the bootstrap design. We are keeping intact all the decision making made by the bootstrap designers, namely the consideration they gave for readability and cohesion across all the possible colors, as well as the color choices themselves. The .label-as-badge class only adds rounded corners, and nothing else. There are no color definitions introduced. Thus, a single line of CSS.

Yep, it is easier to just hack away and drop in those .alert-xxxxx classes -- you don't have to add any lines of CSS. Or you could care more about the little things and add one line.

这篇关于Twitter Bootstrap 3.0 我如何“徽章徽章-重要"现在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！