Twitter Bootstrap 3.0「バッジバッジ - 重要」を表示する方法
バージョン2では、私は使うことができました
バッジバッジ重要
私は.badge要素がもはやコンテキスト（-success、-primaryなど）クラスを持っていないことを見ます。
バージョン3でどうやって同じことを達成できますか？
例えば。 UIに警告バッジと重要なバッジが欲しいのですが
CSSにこの1行クラスを追加して、ブートストラップ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>
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年11月4日：アラートクラスを.badgeと相互受粉させることがなぜそれほど素晴らしいものではないのかに関する最新情報です。私はこの写真がそれをまとめると思います：
これらのアラートクラスは、バッジに合うようには設計されていません。意図した色の「ヒント」を使ってそれらをレンダリングしますが、結局のところウィンドウの外には一貫性がなく、読みやすさに疑問があります。これらの警戒されたバッジは視覚的にまとまりがありません。
.label-as-badgeソリューションはブートストラップデザインを拡張するだけです。私たちは、ブートストラップデザイナーによるすべての意思決定、つまりすべての可能な色にわたる読みやすさとまとまり、そして色の選択自体についての考慮をそのまま保っています。 .label-as-badgeクラスは丸みを帯びた角を追加するだけで、他には何も追加しません。色の定義は導入されていません。したがって、CSSの単一行です。
うん、それらの.alert-xxxxxクラスをハックしてドロップするほうが簡単だ - あなたは CSSの行を追加する必要はない。それとも、あなたはささいなことをもっと気にして1行追加することができます。
手短に言うと、badge-importantをalert-dangerまたはprogress-bar-dangerのいずれかに置き換えます。
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
アラートDocu：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
プログレスバーDocu：http://getbootstrap.com/components/#progress-alternatives
ブートストラップ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;
}
badgeのコンテキストクラスは、実際にはBootstrap 3から削除されています。そのため、次のような同じ効果を作成するにはカスタムCSSを追加する必要があります。
.badge-important{background-color:#b94a48;}
Bootply
色をもう少し濃くするために考えられるもう1つの方法は、次のとおりです。
<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 を参照してください。
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は簡単なはずです。
上記の答えと同じですが、ここではブートストラップ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;
}LESSバージョンを使用するときは、mixins.lessをインポートして色付きのバッジ用の独自のクラスを作成できます。
.badge-warning {
.label-variant(@label-warning-bg);
}
他の色についても同じです。警告を危険、成功などに置き換えてください。
まあ、これはひどく遅い答えですが、私はまだ私の2セントを入れるつもりだと思います...この答えは本質的に新しい解決策を追加しないので、私はコメントとしてこれを投稿できたかもしれませんさらに別の方法として。しかし、コメントでは、文字数制限のためにすべての詳細を説明することはできません。
注：CSSファイルをブートストラップするには編集が必要です - .badgeのスタイル定義を.label-defaultより上に移動します。私の限定的なテストの変更による実用的な副作用は見つかりませんでした。
broc.seibの解決策 は、CSSに最小限の追加でOPの要件を達成するためのおそらく最善の方法ですが、まったく追加のCSSを使用せずに同じ効果を達成することは可能です。 のようなものです。Jens A. Kochの解決策 または.label-xxxコンテキストクラスを使用する方法は、progress-bar-xxxクラスに比べて覚えやすいためです。 .alert-xxxクラスが同じ効果をもたらすとは思わない。
あなたがしなければならないのはただ.badgeと.label-xxxクラスを一緒に使うことです（しかしこの順序で）。上記の注に記載されている変更を加えることを忘れないでください。
<a href="#">Inbox <span class="badge label-warning">42</span></a>は次のようになります。
重要：アップグレードして新しいローカルCSSファイルに変更を加えることを忘れた場合、この解決策はスタイルを壊す可能性があります。この課題に対する私の解決策は、私のカスタムCSSファイルにすべての.label-xxxスタイルをコピーし、それを他のすべてのCSSファイルの後にロードすることでした。 BS3をロードするためにCDNを使うときにもこのアプローチは役に立ちます。
** P.S：**トップクラスの回答は両方とも長所と短所があります。それを実行するための「唯一の正しい方法」がないため、それはあなたがあなたのCSSを実行することを好む方法です。