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

Dans la version deux je pourrais utiliser

badge insigne important

Je vois que l’élément .badge n’a plus de classes contextuelles (-succès, -primaires, etc.).

Comment puis-je obtenir 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 composant d’ label bootstrap.

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

Comparez cette label et ce badge côte à côte:

 hello world 

entrer la description de l'image ici

Ils semblent les mêmes. Mais dans le CSS, label utilise em donc il évolue bien, et il a toujours toutes les classes “-color”. Ainsi, l’étiquette s’adaptera à de plus grandes tailles de police et pourra être colorée avec l’étiquette-success, label-warning, etc. Voici deux exemples:

 Yay! Rah! 

entrer la description de l'image ici

Ou où les choses sont plus grandes:

 
Yay! Rah!

entrer la description de l'image ici


16/11/2015 : En regardant comment on va faire ça dans Bootstrap 4

On dirait que les classes .badge ont complètement disparu. Mais il y a une classe .label-pill (ici) qui ressemble à ce que nous voulons.

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

En utilisation, il ressemble à ceci:

 Default Primary Success Info Warning Danger 

entrer la description de l'image ici


11/04/2014 : Voici une mise à jour sur la raison pour laquelle les classes d’ .badge avec .badge ne sont pas si bonnes. Je pense que cette image résume bien:

entrer la description de l'image ici

Ces classes d’alerte n’étaient pas conçues pour aller avec les badges. Il les rend avec un “indice” des couleurs souhaitées, 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 cohérents visuellement.

La .label-as-badge ne fait qu’étendre le design bootstrap. Nous gardons intactes toutes les décisions sockets par les concepteurs de bootstrap, à savoir la considération qu’ils accordaient à la lisibilité et à la cohésion dans toutes les couleurs possibles, ainsi que les choix de couleurs eux-mêmes. La .label-as-badge ajoute uniquement des coins arrondis, et rien d’autre. Il n’y a aucune définition de couleur introduite. Ainsi, une seule ligne de CSS.

Oui, il est plus facile de simplement pirater et abandonner ces classes .alert-xxxxx – vous n’avez pas besoin d’append de lignes de CSS. Ou vous pouvez faire plus attention aux petites choses et append une ligne.

En résumé: remplacez le badge-important par un alert-danger ou de progress-bar-danger .

Il ressemble à ceci: Démo Bootply .


Vous pouvez combiner le badge classe CSS avec alert-* ou progess-bar-* pour les colorer:

Avec class="badges alert-*"

  badge Info badge Success badge Danger badge Warning 

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

Avec class="badges progress-bar-*" (comme suggéré par @ clami219)

  badge Info badge Success badge Danger badge Warning 

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

Bootstrap 3 a supprimé ces options de couleur pour les badges. Cependant, nous pouvons append ces styles manuellement. Voici ma solution, et voici le bac 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; } 

Les classes de contexte pour badge sont en effet supprimées de Bootstrap 3, vous devrez donc append des CSS personnalisées pour créer le même effet, comme par exemple …

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

Butin

Une autre façon possible, pour rendre les couleurs un peu plus intenses, est celle-ci:

 10 20 30 40 

Voir Bootply

Si vous utilisez une version SASS (par exemple, celle de thomas-mcdonald ), vous souhaiterez peut-être être légèrement plus dynamic (respecter 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 LESS devrait être simple.

Comme la réponse ci-dessus, mais en utilisant ici 3 noms et couleurs de bootstrap:

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

Même chose 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 encore mettre mes deux cents dans … J’aurais pu poster ceci comme un commentaire car cette réponse n’ajoute pas de nouvelle solution mais ajoute de la valeur à la publication. comme une autre alternative. Mais dans un commentaire, je ne pourrais pas donner tous les détails à cause de la limite de caractères.

REMARQUE: Ceci nécessite une modification du fichier CSS bootstrap – déplacez les définitions de style pour .badge au .label-default dessus de .label-default . Impossible de trouver des effets secondaires pratiques dus au changement de mes tests limités.

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

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

Inbox 42 ressemble à ceci:

Badge avec avertissement bg

IMPORTANT: cette solution peut casser vos styles si vous décidez de mettre à niveau et d’omettre d’apporter les modifications à votre nouveau fichier CSS local. Ma solution à ce problème consistait à copier tous les styles .label-xxx dans mon fichier CSS personnalisé et à 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 comme ça que vous préférez faire votre CSS car il n’y a pas “que la bonne façon” de le faire.