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

je voudrais configurer la taille de l'étiquette de la même taille d'écran.

f. E. pour grand écran grande étiquette, pour petit écran Petite étiquette.

20
demandé sur Rob 2016-01-27 01:22:37

2 réponses

http://getbootstrap.com/components/

cependant, vous pouvez personnaliser les classes bootstrap de cette façon. Dans votre fichier css

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

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

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

alternativement, vous pouvez utiliser des balises d'en-tête pour changer 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 ajouter classes de taille pour les étiquettes dans les versions futures de Bootstrap.

15
répondu Richard Hamilton 2016-01-26 22:27:57

vous aurez à faire 2 choses pour faire une étiquette Bootstrap (ou n'importe quoi vraiment) ajuster les tailles en fonction de la taille de l'écran:

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

voici un exemple de listage CSS à 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 il 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>
3
répondu Kasey Speakman 2016-05-11 21:09:59