Dalam versi dua saya bisa menggunakan

badge-badge penting

Saya melihat bahwa elemen .badge tidak lagi memiliki kelas kontekstual (-success, -primary, dll.).

Bagaimana saya mencapai hal yang sama di versi 3?

Misalnya. Saya ingin lencana peringatan dan lencana penting di UI saya

Cukup tambahkan kelas satu baris ini di CSS Anda, dan gunakan labelkomponen bootstrap .

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

Bandingkan ini labeldan badgeberdampingan:

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

Mereka tampak sama. Tapi di CSS, labelgunakan emjadi skala dengan baik, dan masih memiliki semua kelas "-color". Jadi label akan menskala ke ukuran font yang lebih besar dengan lebih baik, dan dapat diwarnai dengan label-success, label-warning, dll. Berikut adalah dua contoh:

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

Atau tempat yang lebih besar:

<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 : Melihat bagaimana kita akan melakukan ini di Bootstrap 4

Sepertinya .badgekelas benar-benar hilang. Tapi ada .label-pillkelas bawaan (di sini) yang terlihat seperti yang kita inginkan.

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

Dalam penggunaannya terlihat seperti ini:

<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 : Ini adalah pembaruan mengapa kelas waspada penyerbukan silang .badgetidak begitu bagus. Saya pikir gambar ini merangkum:

Kelas peringatan itu tidak dirancang untuk digunakan dengan lencana. Ini membuat mereka dengan "petunjuk" dari warna yang dimaksudkan, tetapi pada akhirnya konsistensi dibuang keluar jendela dan keterbacaan dipertanyakan. Lencana yang di-retas itu tidak kohesif secara visual.

The .label-as-badgesolusi hanya memperluas desain bootstrap. Kami menjaga keutuhan semua keputusan yang dibuat oleh desainer bootstrap, yaitu pertimbangan yang mereka berikan untuk keterbacaan dan kohesi di semua warna yang mungkin, serta pilihan warna itu sendiri. The .label-as-badgekelas hanya menambah sudut membulat, dan tidak ada lagi. Tidak ada definisi warna yang diperkenalkan. Dengan demikian, satu baris CSS.

Yep, lebih mudah untuk hanya hack pergi dan drop pada mereka .alert-xxxxxkelas - Anda tidak perlu menambahkan setiap baris CSS. Atau Anda bisa lebih peduli tentang hal-hal kecil dan menambahkan satu baris.

Singkatnya: Ganti badge-importantdengan alert-dangeratau progress-bar-danger.

Ini terlihat seperti ini: Bootply Demo .

Anda dapat menggabungkan kelas CSS badgedengan alert-*atau progess-bar-*untuk mewarnainya:

Dengan 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

Alerts Docu: http://getbootstrap.com/components/#alerts

Dengan class="badges progress-bar-*"(seperti yang disarankan oleh @ 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

Progress-Bar Docu: http://getbootstrap.com/components/#progress-alternatives

Bootstrap 3 menghapus opsi warna itu untuk lencana. Namun, kami dapat menambahkan gaya tersebut secara manual. Inilah solusi saya, dan inilah Bin JS :

.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;
}

Kelas konteks untuk badgememang dihapus dari Bootstrap 3, jadi Anda harus menambahkan beberapa CSS khusus untuk membuat efek yang sama seperti ...

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

Bootply

Cara lain yang mungkin, untuk membuat warna sedikit lebih intens, adalah yang ini:

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

Lihat Bootply

Jika menggunakan versi SASS (misalnya: versi thomas-mcdonald ), maka Anda mungkin ingin sedikit lebih dinamis (menghormati variabel yang ada) dan membuat semua konteks lencana menggunakan teknik yang sama seperti yang digunakan untuk label:

// 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);
}

Setara KURANG harus langsung.

Seperti jawaban di atas tetapi di sini menggunakan nama dan warna bootstrap 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;
}

Saat menggunakan versi KURANG Anda dapat mengimpor mixins.less dan membuat kelas Anda sendiri untuk lencana berwarna:

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

Sama untuk warna lainnya; ganti saja peringatan dengan bahaya, kesuksesan, dll.

Yah, ini adalah jawaban yang sangat terlambat tapi saya pikir saya masih akan memasukkan dua sen saya ... Saya bisa memposting ini sebagai komentar karena jawaban ini pada dasarnya tidak menambahkan solusi baru tetapi itu menambah nilai pada posting sebagai alternatif lain. Tetapi dalam komentar saya tidak akan bisa memberikan semua detail karena batas karakter.

CATATAN: Ini perlu diedit untuk mem-bootstrap file CSS - memindahkan definisi gaya untuk di .badgeatas .label-default. Tidak dapat menemukan efek samping praktis karena perubahan dalam pengujian terbatas saya.

Sementara solusi broc.seib mungkin merupakan cara terbaik untuk mencapai persyaratan OP dengan penambahan minimal pada CSS, dimungkinkan untuk mencapai efek yang sama tanpa CSS tambahan sama sekali seperti solusi Jens A. Koch atau dengan menggunakan .label-xxxkelas kontekstual karena mereka mudah diingat dibandingkan dengan progress-bar-xxxkelas. Saya tidak berpikir bahwa .alert-xxxkelas memberikan efek yang sama.

Yang harus Anda lakukan adalah hanya menggunakan .badgedan .label-xxxkelas bersama (tetapi dalam urutan ini). Jangan lupa untuk melakukan perubahan yang disebutkan dalam CATATAN di atas.

<a href="#">Inbox <span class="badge label-warning">42</span></a> terlihat seperti ini:

PENTING: Solusi ini dapat merusak gaya Anda jika Anda memutuskan untuk meningkatkan dan lupa untuk membuat perubahan pada file CSS lokal baru Anda. Solusi saya untuk tantangan ini adalah menyalin semua .label-xxxgaya dalam file CSS khusus saya dan memuatnya setelah semua file CSS lainnya. Pendekatan ini juga membantu ketika saya menggunakan CDN untuk memuat BS3.

** PS: ** Kedua jawaban teratas mendapat pro dan kontra. Itu hanya cara Anda lebih suka melakukan CSS Anda karena tidak ada "hanya cara yang benar" untuk melakukannya.