Buttons-size
Présentation
Ce module est dépendant du module buttons.
Il permet de faire varier les tailles des boutons à l'aide du mixin button-size, qui accepte cinq paramètres :
- $padding-y,
- $padding-x,
- $font-size,
- $line-height,
- $border-radius.
De plus, si le setting $enable-rounded est à true dans les settings genéraux, un border-radius est appliqué.
Utilisation
Deux classes prédéfinies sont disponibles :
.btn-lg
(gros boutons) ;.btn-sm
(petits boutons).
Exemple
<p>
<button type="button" class="btn btn-lg">Gros bouton</button>
<button type="button" class="btn btn-sm">Petit button</button>
</p>
<p>On peut bien sûr combiner les classes de boutons :</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Petit bouton primaire</button>
<button type="button" class="btn btn-secondary btn-lg">Gros bouton secondaire</button>
</p>
Démo
Variantes de tailles de boutons
Combinaison de classes de boutons :