バージョン2で使用できました
バッジ バッジ重要
.badge 要素には、コンテキスト (-success、-primary など) クラスがなくなっていることがわかります。
バージョン 3 で同じことを達成するにはどうすればよいですか?
例えば。UI に警告バッジと重要バッジを表示したい
質問する
148225 次
9 に答える
264
この1 行のクラスを 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がそれほど優れていない理由についての最新情報です。この写真はそれを要約していると思います：
これらのアラート クラスは、バッジに対応するようには設計されていません。意図した色の「ヒント」でそれらをレンダリングしますが、最終的には一貫性が失われ、読みやすさが疑わしくなります。これらのアラート ハッキング バッジは、視覚的にまとまりがありません。
.label-as-badge解決策は、ブートストラップ設計を拡張することだけです。ブートストラップ デザイナーが行ったすべての意思決定、つまり、可能なすべての色の可読性とまとまり、および色の選択自体について考慮した内容をそのまま保持しています。この.label-as-badgeクラスは角を丸くするだけで、他には何も追加しません。導入された色の定義はありません。したがって、CSS は 1 行です。
そうです、ハックしてこれらのクラスにドロップする方が簡単です。CSS の行を追加する.alert-xxxxx必要はありません。または、ささいなことに気を配り、1 行追加することもできます。
于 2014-10-21T19:47:43.153 に答える
256
要するに:またはbadge-importantのいずれalert-dangerかに置き換えますprogress-bar-danger。
次のようになります: Bootply Demo。
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
アラート ドキュメント: 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
プログレスバーのドキュメント: http://getbootstrap.com/components/#progress-alternatives
于 2014-02-22T15:49:30.817 に答える
25
のコンテキスト クラスbadgeは実際に Bootstrap 3 から削除されているため、カスタム CSS を追加して同じ効果を作成する必要があります...
.badge-important{background-color:#b94a48;}
ブートプライ
于 2013-09-11T01:51:43.080 に答える
20
色をもう少し強くするための別の可能な方法は、次のとおりです。
<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>
ブートプライを見る
于 2014-09-04T16:19:19.343 に答える
5
上記の回答と同様ですが、ここではブートストラップ 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;
}于 2015-09-10T22:50:44.407 に答える
2
LESS バージョンを使用する場合、mixins.less をインポートして、カラー バッジ用の独自のクラスを作成できます。
.badge-warning {
.label-variant(@label-warning-bg);
}
他の色も同じです。警告を危険、成功などに置き換えるだけです。
于 2014-05-17T17:12:57.170 に答える