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

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.

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>