[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか？

質問

バージョン2では

バッジ バッジ重要

.badge要素にコンテキスト（-success,-primaryなど）クラスがなくなりましたね。

バージョン3で同じことを実現するにはどうしたらいいですか？

例：UIに警告バッジと重要バッジを表示したい。

どのように解決するのですか？

これを追加するだけです。 一行 クラスを CSS に記述し、ブートストラップの 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" クラスが残っています。そのため、ラベルはより大きなフォントサイズに対応し、label-success, label-warning などで色を付けることができます。ここに2つの例があります。

<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 クラス (ここ) のように見えますが、これは私たちが欲しいもののように見えます。

.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 はあまりよろしくない。この絵に集約されていると思います。

これらの警告クラスは、バッジに合うように設計されていません。意図された色の"hint"でそれらをレンダリングしますが、最終的に一貫性は窓から投げ出され、読みやすさは疑問視されるでしょう。これらのアラートハックされたバッジは、視覚的にまとまりがありません。

その .label-as-badge のソリューションは、ブートストラップ・デザインを拡張しているに過ぎません。私たちは、ブートストラップのデザイナーが行ったすべての意思決定、つまり、彼らがすべての可能な色に対して行った読みやすさとまとまりへの配慮、そして色の選択そのものをそのまま維持しているのです。そのため .label-as-badge クラスは角丸を追加するだけで、他には何もありません。色の定義も導入していない。このように、CSSは1行です。

そうです。 .alert-xxxxx クラスを追加する必要はありません。 任意の の行を含むCSSを使用します。あるいは ができた。 些細なことに気を配り、1行だけ追加する。