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
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!
Ou où les choses sont plus grandes:
Yay! Rah!
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
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:
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)
Info Success Danger 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;}
Une autre façon possible, pour rendre les couleurs un peu plus intenses, est celle-ci:
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:
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.