En version deux, je pourrais utiliser
badge insigne-important
Je vois que l’élément .badge n’a plus contextuelle (- succès, - primaire, etc..) les classes.
Comment pour réaliser la même chose dans la version 3 ?
Par exemple. Je veux des badges d’avertissement et d’insignes importants dans mon interface utilisateur
En bref: Remplacer badge-important soit avec altert-danger ou progress-bar-danger.
Il ressemble à ceci: Bootply Démo.
Vous pouvez combiner la classe CSS badge avec alert-* ou progess-bar-* les couleurs:
Avec class="badges alter-*"
<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
Barre de progression Docu: http://getbootstrap.com/components/#progress-alternatives
Il suffit d'ajouter ce une ligne de classe dans votre CSS, et d'utiliser le bootstrap label de la composante.
.label-as-badge {
border-radius: 1em;
}
Comparer cette label et badge à côté de:
<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 alors 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 gros:
<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/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.
L' .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. L' .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 la baisse de ceux - .alert-xxxxx classes: vous n'avez pas à ajouter toutes les lignes de CSS. Ou vous pourriez soins plus sur les petites choses et ajouter une ligne.
Bootstrap 3 a supprimer ces options de couleur pour les badges. mais nous pourrions ajouter ces style manuellement. Voici ma solution : Voici la JS Bin [1] http://jsbin.com/uhizoRA/59/edit
Profitez-en !
Si vous utilisez une version SASS (par exemple : celui de thomas-mcdonald), alors vous pouvez être un peu plus dynamique (l’honneur des variables existantes) et de créer tous les contextes d’insigne avec la même technique que celle utilisée pour les étiquettes :
MOINS l’équivalent devrait être simple.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
