Boutons Bootstrap 5

Style de bouton

Bootstrap 5 propose différents styles de boutons :

Exemple

<button type="button" class="btn">De base</button>
<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Réussite</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Dangereux</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>

Essayer par vous-même

La classe de bouton peut être utilisée pour <a>、<button> ou <input> Élément :

Exemple

<a href="#" class="btn btn-success">Bouton de lien</a>
<button type="button" class="btn btn-success">Bouton</button>
<input type="button" class="btn btn-success" value="Bouton d'entrée">
<input type="submit" class="btn btn-success" value="Soumettre">
<input type="reset" class="btn btn-success" value="Réinitialiser">

Essayer par vous-même

Pourquoi écrivons-nous un # dans l'attribut href du lien ?

Puisque nous n'avons aucune page liée et nous ne voulons pas recevoir de message "404", nous utilisons # comme lien. Dans la vie réelle, il devrait s'agir de l'URL réelle de la page "Recherche".

Contour des boutons

Bootstrap 5 propose également huit boutons contours/bordures.

Placer le curseur dessus pour voir des effets "survol" supplémentaires :

Exemple

<button type="button" class="btn btn-outline-primary">Principal</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Réussite</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-warning">Avertissement</button>
<button type="button" class="btn btn-outline-danger">Dangereux</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<button type="button" class="btn btn-outline-light text-dark">Clair</button>

Essayer par vous-même

Taille des boutons

Pour les grands boutons .btn-lg Classe, pour les petits boutons .btn-sm Classe :

Exemple

<button type="button" class="btn btn-primary btn-lg">Grand</button>
<button type="button" class="btn btn-primary">Par défaut</button>
<button type="button" class="btn btn-primary btn-sm">Petit</button>

Essayer par vous-même

bouton en bloc

Pour créer un bouton en bloc couvrant toute la largeur de l'élément parent, utilisez .d-grid "helper" class :

Exemple

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Bouton pleine largeur</button>
</div>

Essayer par vous-même

Si vous avez de nombreux boutons en bloc, vous pouvez utiliser .gap-* La classe contrôle l'espacement entre eux :

Exemple

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Bouton pleine largeur</button>
  <button type="button" class="btn btn-primary btn-block">Bouton pleine largeur</button>
  <button type="button" class="btn btn-primary btn-block">Bouton pleine largeur</button>
</div>

Essayer par vous-même

Bouton actif/désactivé

Les boutons peuvent être réglés en mode actif (visible comme appuyé) ou désactivé (non cliquable) :

la classe .active rend le bouton visible comme appuyé, tandis que désactivé L'attribut rend le bouton non cliquable. Notez que l'élément <a> ne prend pas en charge l'attribut disabled, par conséquent, vous devez utiliser .disabled La classe rend visible visuellement le bouton désactivé.

Exemple

<button type="button" class="btn btn-primary active">Primaire Actif</button>
<button type="button" class="btn btn-primary" disabled>Désactivé Primaire</button>
<a href="#" class="btn btn-primary disabled">Lien désactivé</a>

Essayer par vous-même

Bouton de chargeur

Vous pouvez également ajouter "spinner" aux boutons, et vous apprendrez plus sur nos tutoriels BS5 Spinner :

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...
</button>

Essayer par vous-même