Bootstrap4 Boutons
Bootstrap 4 propose des boutons avec différents styles.
Exemple
<button type="button" class="btn">Bouton de base</button>
<button type="button" class="btn btn-primary">Bouton primaire</button>
<button type="button" class="btn btn-secondary">Bouton secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-light">Clair</button>
<button type="button" class="btn btn-link">Lien</button>
Essayez-le vous-même »
Les classes de boutons peuvent être utilisées sur<a>, <button>, ou<input>éléments:
Exemple
<a href="#" class="btn btn-info" role="button">Bouton de lien</a>
<button type="button" class="btn btn-info">Bouton</button>
<input type="button" class="btn btn-info" value="Bouton de saisie">
<input type="submit" class="btn btn-info" value="Bouton d'envoi">
Essayez-le vous-même »
Contour de bouton
Exemple
<button type="button" class="btn btn-outline-primary">Bouton primaire</button>
<button type="button" class="btn btn-outline-secondary">Bouton secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Avertissement</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<button type="button" class="btn btn-outline-light text-dark">Clair</button>
Essayez-le vous-même »
Boutons de différentes tailles
Bootstrap 4 vous permet de définir la taille des boutons :
Exemple
<button type="button" class="btn btn-primary btn-lg">Grand bouton</button>
<button type="button" class="btn btn-primary">Bouton par défaut</button>
<button type="button" class="btn btn-primary btn-sm">Petit bouton</button>
Essayez-le vous-même »
Boutons au niveau bloc
En ajoutant la.btn-blockclasse, vous pouvez créer des boutons de niveau bloc :
Exemple
<button type="button" class="btn btn-primary btn-block">Bouton 1</button>
Essayez-le vous-même »
Boutons actifs et désactivés
Les boutons peuvent être définis sur un état actif ou désactivé (non cliquable).
.activeLa classe peut rendre un bouton actif,disabledL'attribut disabled peut rendre un bouton non cliquable. Remarque : l'élément <a> ne prend pas en charge l'attribut disabled ; vous pouvez ajouter la.disabledclasse au lien pour empêcher les clics.
Exemple
<button type="button" class="btn btn-primary active">Bouton actif</button>
<button type="button" class="btn btn-primary" disabled>Bouton désactivé</button>
<a href="#" class="btn btn-primary disabled">Lien désactivé</a>
Essayez-le vous-même »
Boutons de chargement
Nous pouvons également créer un bouton en cours de chargement.
Exemple
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Chargement..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Chargement..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Chargement..
</bouton>
Essayez-le vous-même »