web-dev-qa-db-ja.com

Twitter Bootstrap 3.0「バッジバッジ - 重要」を表示する方法

バージョン2では、私は使うことができました

バッジバッジ重要

私は.badge要素がもはやコンテキスト(-success、-primaryなど)クラスを持っていないことを見ます。

バージョン3でどうやって同じことを達成できますか?

例えば。 UIに警告バッジと重要なバッジが欲しいのですが

216
Peter

CSSにこの1行クラスを追加して、ブートストラップlabelコンポーネントを使用するだけです。

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

このlabelbadgeを並べて比較します。

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

enter image description here

それらは同じように見えます。しかし、CSSでは、labelemを使用しているため、適切に拡大縮小され、さらにすべての "-color"クラスがあります。そのため、ラベルはより大きなフォントサイズに合わせて拡大縮小され、label-success、label-warningなどで色付けできます。次に例を2つ示します。

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

enter image description here

あるいは、物事がもっと大きいところでは:

<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>

enter image description here


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>

enter image description here


2014年11月4日:アラートクラスを.badgeと相互受粉させることがなぜそれほど素晴らしいものではないのかに関する最新情報です。私はこの写真がそれをまとめると思います:

enter image description here

これらのアラートクラスは、バッジに合うようには設計されていません。意図した色の「ヒント」を使ってそれらをレンダリングしますが、結局のところウィンドウの外には一貫性がなく、読みやすさに疑問があります。これらの警戒されたバッジは視覚的にまとまりがありません。

.label-as-badgeソリューションはブートストラップデザインを拡張するだけです。私たちは、ブートストラップデザイナーによるすべての意思決定、つまりすべての可能な色にわたる読みやすさとまとまり、そして色の選択自体についての考慮をそのまま保っています。 .label-as-badgeクラスは丸みを帯びた角を追加するだけで、他には何も追加しません。色の定義は導入されていません。したがって、CSSの単一行です。

うん、それらの.alert-xxxxxクラスをハックしてドロップするほうが簡単だ - あなたは CSSの行を追加する必要はない。それとも、あなたはささいなことをもっと気にして1行追加することができます。

252
broc.seib

手短に言うと、badge-importantalert-dangerまたはprogress-bar-dangerのいずれかに置き換えます。

Bootply Demo


CSSクラスのbadgealert-*または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

252
Jens A. Koch

ブートストラップ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;
}
44
Adams.H

badgeのコンテキストクラスは、実際にはBootstrap 3から削除されています。そのため、次のような同じ効果を作成するにはカスタムCSSを追加する必要があります。

.badge-important{background-color:#b94a48;}

Bootply

25
Zim

色をもう少し濃くするために考えられるもう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 を参照してください。

20
clami219

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は簡単なはずです。

18
PowerKiKi

上記の答えと同じですが、ここではブートストラップ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;
}
5
jumptiger13

LESSバージョンを使用するときは、mixins.lessをインポートして色付きのバッジ用の独自のクラスを作成できます。

.badge-warning {
    .label-variant(@label-warning-bg);
}

他の色についても同じです。警告を危険、成功などに置き換えてください。

2
ThiefMaster

まあ、これはひどく遅い答えですが、私はまだ私の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>は次のようになります。

Badge with warning bg

重要:アップグレードして新しいローカルCSSファイルに変更を加えることを忘れた場合、この解決策はスタイルを壊す可能性があります。この課題に対する私の解決策は、私のカスタムCSSファイルにすべての.label-xxxスタイルをコピーし、それを他のすべてのCSSファイルの後にロードすることでした。 BS3をロードするためにCDNを使うときにもこのアプローチは役に立ちます。

** P.S:**トップクラスの回答は両方とも長所と短所があります。それを実行するための「唯一の正しい方法」がないため、それはあなたがあなたのCSSを実行することを好む方法です。

2
Fr0zenFyr