web-dev-qa-db-fra.com

Comment définir la taille de l'étiquette dans Bootstrap

J'aimerais que la taille de l'étiquette corresponde à la taille de l'écran.

f.e. pour grand écran grande étiquette, pour petit écran petite étiquette.

twitter-bootstraplabelsize
22
Spontan23

Dans la version actuelle de Bootstrap, Bootstrap 3, ils ne disposent pas de classes séparées pour différents styles d'étiquettes.

http://getbootstrap.com/components/

Cependant, vous pouvez personnaliser les classes bootstrap). Dans votre fichier css

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

Vous pouvez également utiliser des balises d'en-tête pour modifier les tailles. Par exemple, voici une étiquette de taille moyenne et une étiquette de petite taille

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>

Ils pourraient éventuellement ajouter des classes de taille pour les étiquettes Bootstrap.

18
Richard Hamilton

Vous devrez faire 2 choses pour créer une étiquette Bootstrap (ou quoi que ce soit vraiment)) en fonction de la taille de l'écran:

  • Utilisez une requête multimédia par plage de taille d'affichage pour ajuster le CSS.
  • Ignorer le dimensionnement CSS défini par Bootstrap. Vous faites cela en rendant vos règles CSS plus spécifiques que celles de Bootstrap. Par défaut, Bootstrap définit .label { font-size: 75% }. Donc, tout sélecteur supplémentaire sur votre règle CSS le rendra plus spécifique.

Voici un exemple de liste CSS pour accomplir ce que vous demandez, en utilisant les 4 tailles par défaut dans Bootstrap:

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap's font size setting */
    .autosized .label { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .autosized .label { font-size: 16px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .autosized .label { font-size: 18px; }
}

@media (min-width: 1200px) {
    .autosized .label { font-size: 20px; }
}

Voici comment cela pourrait être utilisé dans le HTML:

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>
5
Kasey Speakman