Nella versione due ho potuto usare

badge badge-important

Vedo che l'elemento .badge non ha più classi contestuali (-success, -primary, ecc.).

Come ottengo la stessa cosa nella versione 3?

Per esempio. Voglio badge di avviso e badge importanti nella mia interfaccia utente

Aggiungi questa classe di una riga nel tuo CSS e usa il labelcomponente bootstrap .

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

Confronta questo labele badgefianco a fianco:

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

Sembrano uguali. Ma nel CSS, labelusa in emmodo che si ridimensiona bene e ha ancora tutte le classi "-color". Quindi l'etichetta si ridimensionerà meglio a caratteri più grandi e può essere colorata con successo dell'etichetta, avviso dell'etichetta, ecc. Ecco due esempi:

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

O dove le cose sono più grandi:

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

16/11/2015 : Ecco come lo faremo in Bootstrap 4

Sembra che le .badgelezioni siano completamente sparite. Ma c'è una .label-pillclasse integrata (qui) che assomiglia a ciò che vogliamo.

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

In uso sembra così:

<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 : Ecco un aggiornamento sul perché le classi di allerta con impollinazione incrociata .badgenon sono così grandi. Penso che questa immagine lo riassuma:

Quelle classi di allerta non sono state progettate per essere abbinate ai badge. Li rende con un "accenno" dei colori previsti, ma alla fine la coerenza viene buttata fuori dalla finestra e la leggibilità è discutibile. Questi badge non sono visivamente coerenti.

La .label-as-badgesoluzione sta solo estendendo il design del bootstrap. Manteniamo intatte tutte le decisioni prese dai progettisti di bootstrap, in particolare la considerazione che hanno dato per la leggibilità e la coesione di tutti i colori possibili, così come le scelte di colore stesse. La .label-as-badgeclasse aggiunge solo angoli arrotondati e nient'altro. Non sono state introdotte definizioni di colore. Pertanto, una singola riga di CSS.

Sì, è più semplice smanettare e rilasciare in quelle .alert-xxxxxclassi - non è necessario aggiungere alcuna riga di CSS. Oppure si potrebbe preoccuparsi di più per le piccole cose e aggiungere una riga.

In breve: sostituire badge-importantcon uno alert-dangero progress-bar-danger.

Sembra così: Bootply Demo .

È possibile combinare la classe CSS badgecon alert-*o progess-bar-*per colorarli:

Con 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

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

Con class="badges progress-bar-*"(come suggerito da @ 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 ha rimosso quelle opzioni di colore per i badge. Tuttavia, possiamo aggiungere quegli stili manualmente. Ecco la mia soluzione, ed ecco il 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;
}

Le classi di contesto per badgesono effettivamente rimosse da Bootstrap 3, quindi dovresti aggiungere alcuni CSS personalizzati per creare lo stesso effetto come ...

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

Bootply

Un altro modo possibile, per rendere i colori un po 'più intensi, è questo:

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

Vedi Bootply

Se si utilizza una versione SASS (ad es. Quella di Thomas-Mcdonald ), è possibile che si desideri essere leggermente più dinamici (onorare le variabili esistenti) e creare tutti i contesti dei badge utilizzando la stessa tecnica utilizzata per le etichette:

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

L'equivalente MENO dovrebbe essere semplice.

Come la risposta sopra ma qui sta usando bootstrap 3 nomi e colori:

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

Quando usi la versione LESS puoi importare mixins.less e creare le tue classi per i badge colorati:

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

Lo stesso per gli altri colori; basta sostituire l'avvertimento con pericolo, successo, ecc.

Bene, questa è una risposta terribilmente in ritardo ma penso che inserirò ancora i miei due centesimi in ... Avrei potuto postarlo come commento perché questa risposta essenzialmente non aggiunge alcuna nuova soluzione ma aggiunge valore al post come ancora un'altra alternativa. Ma in un commento non sarei in grado di fornire tutti i dettagli a causa del limite del personaggio.

NOTA: per eseguire il bootstrap è necessario modificare il file CSS: spostare le definizioni degli stili .badgesopra .label-default. Impossibile trovare effetti collaterali pratici a causa della modifica dei miei test limitati.

Mentre la soluzione di broc.seib è probabilmente il modo migliore per raggiungere il requisito di OP con una minima aggiunta al CSS, è possibile ottenere lo stesso effetto senza alcun CSS aggiuntivo proprio come la soluzione di Jens A. Koch o usando .label-xxxle classi contestuali perché sono facili da ricordare rispetto alle progress-bar-xxxlezioni. Non penso che le .alert-xxxlezioni diano lo stesso effetto.

Tutto quello che devi fare è solo usare .badgee le .label-xxxclassi insieme (ma in questo ordine). Non dimenticare di apportare le modifiche menzionate nella NOTA sopra.

<a href="#">Inbox <span class="badge label-warning">42</span></a> Somiglia a questo:

IMPORTANTE: questa soluzione potrebbe rompere i tuoi stili se decidi di aggiornare e dimentichi di apportare le modifiche nel tuo nuovo file CSS locale. La mia soluzione a questa sfida era copiare tutti gli .label-xxxstili nel mio file CSS personalizzato e caricarlo dopo tutti gli altri file CSS. Questo approccio aiuta anche quando uso un CDN per caricare BS3.

** PS: ** Entrambe le risposte più votate hanno i loro pro e contro. È solo il modo in cui preferisci fare il tuo CSS perché non esiste un "solo modo corretto" per farlo.