Bootstrap 4 boutons
Styles de boutons
Bootstrap 4 propose différents styles de boutons :
Exemple
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Les classes de boutons peuvent être utilisées sur les éléments <a>, <button>ou
<input>:
Exemple
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Pourquoi met-on un # dans l'attribut href du lien ?
Comme nous n'avons pas de page vers laquelle le lier, et que nous ne voulons pas recevoir de message "404", nous mettons # comme lien. Dans la vraie vie, il devrait bien sûr s'agir d'une véritable URL vers la page "Recherche".
Contour du bouton
Bootstrap 4 fournit huit boutons contours/encadrés :
Exemple
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Tailles des boutons
Utilisez la .btn-lgclasse pour les gros boutons ou .btn-smla classe pour les petits boutons :
Exemple
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Bloquer les boutons de niveau
Ajoutez une classe .btn-blockpour créer un bouton au niveau du bloc qui s'étend sur toute la largeur de l'élément parent.
Exemple
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Boutons actifs/désactivés
Un bouton peut être défini sur un état actif (apparaître enfoncé) ou désactivé (non cliquable) :
La classe .activefait apparaître un bouton enfoncé et l' disabledattribut rend un bouton incliquable. Notez que les éléments <a> ne prennent pas en charge l'attribut disabled et doivent donc utiliser la .disabledclasse pour le faire apparaître visuellement désactivé.
Exemple
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Boutons rotatifs
Vous pouvez également ajouter des "spinners" à un bouton, dont vous en apprendrez plus dans notre tutoriel BS4 Spinners :
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>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>