Twitter Bootstrap 3.0 comment puis-je “badge badge-important” maintenant

Il suffit d'ajouter ce d'une ligne classe dans votre CSS, et d'utiliser le bootstrap label composant.

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

Comparer ce label et badge côté par côté:

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

Ils apparaissent de la même. Mais dans le CSS, label utilise em de sorte qu'il évolue bien, et il a encore toutes les "couleurs" des classes. Si l'étiquette de mise à l'échelle pour de plus grandes tailles de police de mieux, et peut être coloré avec une étiquette de succès, étiquette de mise en garde, etc. En voici deux exemples:

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

Ou où les choses sont plus grands:

<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: en Regardant comment nous allons le faire dans le Bootstrap 4

Ressemble .badge classes sont complètement disparu. Mais il y a un haut- .label-pill classe (ici) qui ressemble à ce que nous voulons.

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

Il 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 sur les raisons de l'allogamie alerte classes avec .badge n'est pas si grande. Je pense que cette photo résume:

Ceux alerte classes n'étaient pas conçus pour aller avec les badges. Il les rend avec une "pointe" de l'intention de couleurs, mais à la fin de la cohérence est jeté par la fenêtre et la lisibilité est discutable. Ceux alerte piraté les badges ne sont pas visuellement cohérent.

La .label-as-badge solution est seulement l'extension de la conception d'amorce. Nous sommes en gardant intactes toutes les décisions rendues par le bootstrap concepteurs, à savoir la considération qu'ils ont donné pour des raisons de lisibilité et de la cohésion dans toutes les couleurs possibles, ainsi que le choix des couleurs elles-mêmes. Le .label-as-badge classe seulement ajoute des coins arrondis, et rien d'autre. Il n'y a pas de couleur d'introduire les définitions. Ainsi, une seule ligne de CSS.

Yep, il est plus facile de bidouiller et de les déposer dans les .alert-xxxxx classes -- vous n'avez pas à ajouter tout lignes de CSS. Ou vous pourrait de soins de plus sur les petites choses et ajouter une ligne.

Bootstrap 3 supprimé ces options de couleur pour les badges. Cependant, nous pouvons ajouter ces styles manuellement. Voici ma solution, et c'est ici la 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;
}

Une autre voie possible, afin de rendre les couleurs un peu plus intense, 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

Comme la réponse ci-dessus, mais ici, c'est à l'aide de bootstrap 3 noms et couleurs:

CSS:

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

Bien, c'est terriblement en retard de réponse, mais je pense que je vais quand même mettre mon grain de sel... je pourrais avoir posté un commentaire car cette réponse n'est pas essentiellement d'ajouter de tout nouveaux solution, mais il ajoute de la valeur à la poste comme encore une autre alternative. Mais dans un commentaire que je ne serais pas en mesure de donner tous les détails à cause de la limite de caractères.

REMARQUE: Cela nécessite une modification à la méthode bootstrap CSS de fichiers - déplacer les définitions de style pour .badge ci-dessus .label-default. Ne pouvais pas trouver toutes pratique des effets secondaires dus à la modification de mon test limitée.

Tout broc.seib de la solution est probablement la meilleure façon d'atteindre l'exigence de l'OP avec un minimum de plus de CSS, il est possible d'obtenir le même effet sans supplément CSS à tous comme Jens A. Koch solution ou en utilisant .label-xxx contextuelle des classes parce qu'ils sont faciles à retenir par rapport à progress-bar-xxx classes. Je ne pense pas que .alert-xxx classes de donner le même effet.

Tout ce que vous avez à faire est de simplement utiliser .badge et .label-xxx classes (mais dans cet ordre). N'oubliez pas d'apporter les modifications mentionnées dans la NOTE ci-dessus.

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

IMPORTANT: Cette solution peut casser vos styles, si vous décidez de mettre à niveau et d'oublier de faire des changements dans votre nouveau fichier CSS. Ma solution pour ce défi a été de copier tous les .label-xxx styles dans mon fichier CSS spécifique et de le charger après tous les autres fichiers CSS. Cette approche permet aussi quand j'utilise un CDN pour le chargement BS3.

**P. S: ** à la Fois les meilleures réponses 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 "manière correcte" à le faire.