Les boutons standards Bootstrap

Les boutons standards Bootstrap

Créer, styliser, dimensionner et désactiver des boutons avec Bootstrap 5.3

1 Présentation

• Les boutons sont présents, sous une forme ou une autre, dans toutes les applications Web : envoyer un formulaire, valider une action, naviguer vers une autre page, ouvrir un menu…
• Techniquement, deux usages sont différents :
  • un bouton submit envoie un formulaire et déclenche presque toujours une requête POST;
  • un hyperlien (<a>) permet d'accéder à une page via une requête GET.
• Visuellement, Bootstrap traite les deux de la même manière : grâce à la classe .btn, un lien et un bouton de formulaire peuvent avoir exactement le même aspect.

Charger Bootstrap 5.3

Pour tous les exemples de ce cours, la page doit charger le CSS et le JavaScript de Bootstrap. Le fichier bootstrap.bundle.min.js contient déjà Popper, nécessaire aux menus déroulants.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Les boutons Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <!-- Vos boutons ici -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2 Les différents types de boutons

• Les classes de boutons peuvent s'appliquer aux balises <a>, <button> et <input>.
• Dans Bootstrap, on rencontre quatre types de boutons :
  • les liens: <a class="btn" role="button">;
  • les boutons: <button class="btn">;
  • les inputs: <input type="button|submit|reset" class="btn">;
  • les dropdowns: un bouton qui ouvre une liste de choix.

Exemple 1

<a class="btn btn-primary" href="#" role="button">Lien</a>
<button class="btn btn-secondary" type="submit">Button</button>
<input class="btn btn-danger" type="button" value="Input">
<input class="btn btn-success" type="submit" value="Submit">

Exemple 2 : les quatre types, dont le dropdown

<!-- Les types de boutons -->
<div class="container">
  <div class="d-flex flex-wrap gap-2">
    <a href="#" class="btn btn-primary" role="button">Un lien</a>

    <button class="btn btn-primary" type="submit">Bouton</button>

    <input type="button" class="btn btn-primary" value="Input">

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button"
              data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action 1</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><a class="dropdown-item" href="#">Action 3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Lien séparé</a></li>
      </ul>
    </div>
  </div>
</div>

3 Les différents styles de boutons

• Bootstrap 5.3 propose plusieurs styles de boutons prédéfinis. Chacun a une signification (sémantique) : la couleur indique à l'utilisateur la nature de l'action.
• La classe .btn seule ne donne qu'une forme de base, sans couleur : il faut toujours lui ajouter une classe de style .btn-*.

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

Le mode sombre (nouveauté 5.3)

• Bootstrap 5.3 gère un mode sombre grâce à l'attribut data-bs-theme="dark".
• Placé sur <html>, il s'applique à toute la page ; placé sur un bloc, il ne s'applique qu'à ce bloc. Les boutons adaptent alors automatiquement leurs couleurs (en particulier .btn-light, .btn-dark et .btn-link).

<div class="p-3 rounded bg-body-tertiary" data-bs-theme="dark">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-outline-light">Outline light</button>
  <button type="button" class="btn btn-link">Link</button>
</div>

4 Dimension des boutons

• Par défaut, un bouton a une taille moyenne: aucune classe supplémentaire n'est nécessaire.
• On peut ajuster la dimension avec les classes suivantes :
  • .btn-lg: grand bouton ;
  • .btn-sm: petit bouton.
• La classe .w-100 de Bootstrap 4 n'existe plus. Pour un bouton qui occupe toute la largeur, on place le bouton dans un conteneur .d-grid, ou on lui ajoute la classe utilitaire .w-100.
• Avec .d-grid et .gap-*, on peut empiler plusieurs boutons pleine largeur sur mobile, puis les remettre côte à côte sur grand écran avec .d-md-flex.

<button type="button" class="btn btn-primary btn-lg">Grand bouton</button>
<button type="button" class="btn btn-primary">Bouton moyen</button>
<button type="button" class="btn btn-primary btn-sm">Petit bouton</button>

<!-- Pleine largeur -->
<div class="d-grid mt-3">
  <button type="button" class="btn btn-secondary">Bouton pleine largeur</button>
</div>

<!-- Empilés sur mobile, côte à côte à partir de md -->
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
  <button type="button" class="btn btn-outline-secondary">Annuler</button>
  <button type="button" class="btn btn-primary">Enregistrer</button>
</div>

5 Boutons actifs et désactivés

• Bootstrap fournit des styles spécifiques pour l'état actif (bouton enfoncé) et l'état désactivé.
• État actif: ajoutez la classe .active et l'attribut aria-pressed="true".
• Bouton bascule: avec data-bs-toggle="button", Bootstrap ajoute ou retire automatiquement la classe .active à chaque clic.
• Désactiver un <button> ou un <input>: utilisez simplement l'attribut HTML standard disabled.
• Désactiver un lien <a>: l'attribut disabled n'existe pas pour les liens. Utilisez la classe .disabled avec aria-disabled="true". Le plus sûr est aussi de retirer l'attribut href: le lien ne peut alors plus être suivi, même au clavier.

<!-- Bouton actif -->
<button type="button" class="btn btn-primary active" aria-pressed="true">Actif</button>

<!-- Bouton bascule -->
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button">Cliquez-moi</button>

<!-- Boutons désactivés -->
<button type="button" class="btn btn-primary" disabled>Bouton désactivé</button>
<input type="submit" class="btn btn-success" value="Envoyer" disabled>

<!-- Lien désactivé (sans href) -->
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Lien désactivé</a>

6 Contours des boutons

• Bootstrap 5.3 permet d'appliquer la couleur sémantique au contour seulement, avec un fond transparent. Le fond se remplit au survol.
• Il suffit de remplacer .btn-* par .btn-outline-*. Cette variante existe pour toutes les couleurs, sauf link.

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

7 Personnaliser un bouton avec les variables CSS

• Dans Bootstrap 5.3, chaque bouton est construit à partir de variables CSS locales : --bs-btn-bg, --bs-btn-color, --bs-btn-border-color, --bs-btn-hover-bg, --bs-btn-padding-x, etc.
• Pour créer son propre style, il n'est plus nécessaire de recompiler Bootstrap : il suffit de redéfinir ces variables dans une classe.

<style>
  .btn-violet {
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: #5b21b6;
  }
</style>

<button type="button" class="btn btn-violet">Mon bouton violet</button>

<!-- Modification ponctuelle, directement sur l'élément -->
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .75rem;">
  Très petit bouton
</button>

8 Activités

Pour chaque activité, créez un fichier HTML basé sur le modèle de la partie 1, qui charge Bootstrap 5.3 (CSS et JS) via le CDN. Testez votre page dans le navigateur et sur un écran de téléphone (outils de développement, mode responsive).

<div class="container">
  <button class="btn-primary">Enregistrer</button>
  <button class="btn btn-default">Annuler</button>
  <button class="btn btn-danger btn-xs">Supprimer</button>
  <a href="/profil" class="btn btn-info" disabled>Mon profil</a>
  <input type="submit" class="btn btn-sucess" value="Valider">
  <button class="btn btn-outline-link">Aide</button>
  <button class="btn btn-dark w-100">Continuer</button>

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
      Options <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Exporter</a></li>
      <li class="divider"></li>
      <li><a href="#">Imprimer</a></li>
    </ul>
  </div>
</div>