TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des boutons dans Bootstrap 5 ?

131

Les boutons sont l’un des éléments de base de tout cadre d’interface utilisateur. Dans notre autre article, nous avons vu de nombreux exemples de boutons Bootstrap 3. Dans Bootstrap 4, des modifications mineures ont été apportées aux classes de boutons pour améliorer l’expérience utilisateur. Par exemple, la classe de bouton par défaut ".btn-dafault" est en train d’être changée en bouton secondaire avec la classe ".btn-secondaire" et la classe de bouton extra-petit ".btn-xs" est supprimée. Il n’y a pas beaucoup de changements aux boutons dans Bootstrap 5. Dans ce didacticiel, explorons davantage la création de différents types de boutons avec Bootstrap 5.

Principes de base des boutons Bootstrap

Avant de créer des boutons, n’oubliez pas les points suivants :

  • Afin d’identifier un élément en tant que bouton, vous devez inclure au minimum la classe ".btn".
  • Des classes supplémentaires détermineront uniquement le style du bouton en plus de la classe ".btn".
  • La classe ".btn" peut être ajoutée à des éléments HTML comme
  • Vous n’avez besoin des fichiers de script Bootstrap que pour la section "Bootstrap Plugins" pour créer un effet de bascule, les autres boutons fonctionneront simplement avec le CSS. Reportez-vous au modèle de démarrage Bootstrap 5 pour plus de détails.

Boutons de base par défaut

Vous pouvez créer différentes couleurs de boutons en utilisant des classes utilitaires d’arrière-plan pour la classe ".btn".

  • Primaire – il s’agit du bouton principal ou principal utilisé avec la couleur bleue .
  • Secondaire – le bouton de couleur blanche est un bouton secondaire ou alternatif.
  • Succès – bouton vert utilisé pour les actions positives.
  • Info – Bouton bleu clair utilisé pour afficher des informations.
  • Avertissement – bouton jaune utilisé pour les actions d’avertissement.
  • Danger – Bouton rouge utilisé pour les actions d’erreur.
  • Light – Bouton de couleur gris clair.
  • Sombre – Bouton avec un fond sombre.
  • Lien – En plus des couleurs d’arrière-plan, vous pouvez également créer un bouton de lien sans arrière-plan.

Le code du bouton principal devrait ressembler à

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Comme expliqué, la classe ".btn" identifie l’élément comme un bouton et la classe ".btn-primary" est utilisée pour créer le bouton avec la couleur primaire (bleue). De même, d’autres codes de bouton sont donnés ci-dessous :

<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-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

Le dernier élément est un bouton de lien qui ressemblera à un lien texte à l’écran mais agira comme un bouton lorsqu’il sera cliqué ou survolé. Les boutons par défaut ressembleront à ci-dessous sur le navigateur :

Comment créer des boutons dans Bootstrap 5 ?

Balises de bouton – Utilisation de classes de boutons avec différentes balises

Les classes de boutons sont prises en charge dans

Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails