Dans la version deux, je pourrais utiliser

badge badge-important

Je vois que l'élément .badge n'a plus de classes contextuelles (-success, -primary, etc.).

Comment réaliser la même chose dans la version 3?

Par exemple. Je veux des badges d'avertissement et des badges importants dans mon interface utilisateur

Ajoutez simplement cette classe d' une ligne dans votre CSS et utilisez le labelcomposant bootstrap .

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

Comparez ceci labelet badgecôte à côte:

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

Ils semblent identiques. Mais dans le CSS, labelutilise emdonc il évolue bien, et il a toujours toutes les classes "-color". Ainsi, l'étiquette évoluera mieux vers des tailles de police plus grandes et peut être colorée avec succès d'étiquette, avertissement d'étiquette, etc. Voici deux exemples:

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

Ou là où les choses sont plus grandes:

<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 : Comment nous allons procéder dans Bootstrap 4

On dirait que les .badgecours ont complètement disparu. Mais il y a une .label-pillclasse intégrée (ici) qui ressemble à ce que nous voulons.

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

En utilisation, cela ressemble à ceci:

<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 : Voici une mise à jour expliquant pourquoi les classes d'alertes à pollinisation croisée .badgene sont pas si géniales. Je pense que cette image résume:

Ces classes d'alerte n'étaient pas conçues pour aller avec des badges. Il les rend avec un "indice" des couleurs prévues, mais à la fin la cohérence est rejetée par la fenêtre et la lisibilité est discutable. Ces badges piratés ne sont pas visuellement cohérents.

La .label-as-badgesolution ne fait qu'étendre la conception du bootstrap. Nous gardons intactes toutes les décisions prises par les concepteurs de bootstrap, à savoir la considération qu'ils ont accordée à la lisibilité et à la cohésion dans toutes les couleurs possibles, ainsi que les choix de couleurs eux-mêmes. La .label-as-badgeclasse n'ajoute que des coins arrondis, et rien d'autre. Aucune définition de couleur n'a été introduite. Ainsi, une seule ligne de CSS.

Oui, il est plus facile de pirater et de supprimer ces .alert-xxxxxclasses - vous n'avez pas besoin d'ajouter de lignes CSS. Ou vous pourriez vous soucier davantage des petites choses et ajouter une ligne.

En bref: remplacez badge-importantpar alert-dangerou progress-bar-danger.

Cela ressemble à ceci: Bootply Demo .

Vous pouvez combiner la classe CSS badgeavec alert-*ou progess-bar-*pour les colorer:

Avec 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

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

Avec class="badges progress-bar-*"(comme suggéré par @ 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 a supprimé ces options de couleur pour les badges. Cependant, nous pouvons ajouter ces styles manuellement. Voici ma solution, et voici le 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;
}

Les classes de contexte pour badgesont en effet supprimées de Bootstrap 3, vous devez donc ajouter du CSS personnalisé pour créer le même effet comme ...

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

Bootply

Un autre moyen possible, pour rendre les couleurs un peu plus intenses, est celui-ci:

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

Voir Bootply

Si vous utilisez une version SASS (par exemple: celle de thomas-mcdonald ), alors vous voudrez peut-être être légèrement plus dynamique (honorer les variables existantes) et créer tous les contextes de badge en utilisant la même technique que celle utilisée pour les étiquettes:

// 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'équivalent MOINS doit être simple.

Comme la réponse ci-dessus, mais voici les noms et les couleurs de 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;
}

Lorsque vous utilisez la version LESS, vous pouvez importer mixins.less et créer vos propres classes pour les badges colorés:

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

Idem pour les autres couleurs; remplacez simplement l'avertissement par le danger, le succès, etc.

Eh bien, c'est une réponse terriblement tardive, mais je pense que je vais quand même mettre mes deux cents ... J'aurais pu poster ceci en tant que commentaire parce que cette réponse n'ajoute essentiellement aucune nouvelle solution mais ajoute de la valeur au message comme encore une autre alternative. Mais dans un commentaire, je ne serais pas en mesure de donner tous les détails en raison de la limite de caractères.

REMARQUE: Cela nécessite une modification pour démarrer le fichier CSS - déplacer les définitions de style .badgeci-dessus .label-default. Impossible de trouver des effets secondaires pratiques en raison du changement de mes tests limités.

Alors que la solution de broc.seib est probablement le meilleur moyen d'atteindre l'exigence d'OP avec un ajout minimal à CSS, il est possible d'obtenir le même effet sans CSS supplémentaire du tout, tout comme la solution de Jens A. Koch ou en utilisant .label-xxxdes classes contextuelles car elles sont faciles à retenir par rapport aux progress-bar-xxxcours. Je ne pense pas que les .alert-xxxcours donnent le même effet.

Tout ce que vous avez à faire est d'utiliser .badgeet de .label-xxxclasser ensemble (mais dans cet ordre). N'oubliez pas de faire les changements mentionnés dans la NOTE ci-dessus.

<a href="#">Inbox <span class="badge label-warning">42</span></a> ressemble à ça:

IMPORTANT: Cette solution peut casser vos styles si vous décidez de mettre à niveau et oubliez d'apporter les modifications dans votre nouveau fichier CSS local. Ma solution pour ce défi était de copier tous les .label-xxxstyles dans mon fichier CSS personnalisé et de le charger après tous les autres fichiers CSS. Cette approche est également utile lorsque j'utilise un CDN pour charger BS3.

** PS: ** Les deux réponses les mieux notées ont leurs avantages et leurs inconvénients. C'est juste la façon dont vous préférez faire votre CSS car il n'y a pas de "seule bonne façon" de le faire.