Twitter Bootstrap 3.0 comment puis-je "badge badge-important" maintenant
Dans la deuxième version, je pourrais utiliser
badge badge-important
Je vois que l'élément .badge n'a plus de classes contextuelles (-success, -primary, 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 à une ligne dans votre CSS et utilisez le composant bootstrap label.
.label-as-badge {
border-radius: 1em;
}
Comparez ceci label et badge côte à côte:
<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>
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'adapte mieux à des tailles de police plus grandes et peut être colorée avec label-success, label-warning, etc. Voici deux exemples:
<span class="label label-success label-as-badge">Yay! Rah!</span>
Ou 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>
11/16/2015 : comment nous allons procéder dans Bootstrap 4
On dirait que .badge les classes ont complètement disparu. Mais il y a un .label-pill class (ici) == intégré qui ressemble à ce que nous voulons.
.label-pill {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
En cours d'utilisation, 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 la raison pour laquelle les classes d'alerte à pollinisation croisée avec .badge ne sont pas si géniales. Je pense que cette image le résume:
Ces classes d'alerte n'étaient pas conçues pour aller avec des badges. Cela les rend avec un "indice" des couleurs prévues, mais à la fin la cohérence est projetée par la fenêtre et la lisibilité est discutable. Ces badges hackés par alerte ne sont pas visuellement cohésifs.
La solution .label-as-badge étend uniquement la conception bootstrap. Nous gardons intactes toutes les décisions prises par les bootstrap concepteurs, à savoir la prise en compte de la lisibilité et de la cohésion entre toutes les couleurs possibles, ainsi que les choix de couleurs eux-mêmes. La classe .label-as-badge ajoute uniquement 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 simplement pirater et déposer dans ces classes .alert-xxxxx - vous n'avez pas à ajouter aucune ligne de CSS. Ou vous pourriez vous soucier davantage des petites choses et ajouter une ligne.
En résumé: remplacez badge-important par alert-danger ou progress-bar-danger.
Cela ressemble à ceci: Démo Bootply.
Vous pouvez combiner la classe CSS badge avec 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
Docu de barre de progression: 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 badge sont 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
Une autre façon de rendre les couleurs un peu plus intenses est la suivante:
<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 ), vous voudrez peut-être un peu plus dynamique (respecter les variables existantes) et créer tous les contextes de badge en utilisant la même technique que celle utilisée pour les libellés:
// 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 devrait être simple.
Comme la réponse ci-dessus, mais ici, on utilise bootstrap 3 noms et couleurs:
/*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 sous ... J'aurais pu poster cela en tant que commentaire car cette réponse n'apporte pas vraiment de nouvelle solution, mais elle 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: vous devez modifier le fichier bootstrap _ CSS - déplacez les définitions de style pour .badge au-dessus de .label-default. Impossible de trouver des effets secondaires pratiques en raison du changement de mon test limité.
Bien que solution de broc.seib soit probablement le meilleur moyen de satisfaire à l'exigence de OP avec une addition minimale à CSS, il est possible d'obtenir le même effet sans aucun supplément de CSS, exactement comme Jens La solution de A. Koch ou en utilisant .label-xxx classes contextuelles car elles sont faciles à mémoriser par rapport à progress-bar-xxx classes. Je ne pense pas que les classes .alert-xxx donnent le même effet.
Tout ce que vous avez à faire est d’utiliser les classes .badge et .label-xxx ensemble (mais dans cet ordre). N'oubliez pas de faire 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 oubliez d'apporter les modifications dans votre nouveau fichier CSS local. Ma solution à ce défi 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.
** P.S: ** 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 façon correcte" de le faire.