Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Bootstrap 5 pour l'intégrateur web
  3. Les boutons
Extrait - Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
Extraits du livre
Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
1 avis
Revenir à la page d'achat du livre

Les boutons

L’objectif

Les boutons sont des éléments d’interface quasi indispensables dans les sites web, mais aussi dans les interfaces d’administration des applications web. Bootstrap propose une gamme de boutons très importante ce qui permet des usages multiples. Vous allez insérer des boutons avec la classe .btn.

Notez bien que cette classe peut s’appliquer aux éléments <a>, <input> et <button>, ce qui nous offre de nombreuses possibilités d’intégration.

Les boutons classiques

Le dossier à télécharger pour ces exemples est nommé 09-Boutons-01.

1. Les boutons simples

Pour ce premier exemple, nous allons insérer trois boutons avec les trois éléments utilisables avec la classe .btn : <a>, <input> et <button>.

Voici le code utilisé dans cet exemple :

<a class="btn btn-primary" href="#" role="button">Elément &lt;a&gt;</a> 
<button class="btn btn-primary" type="submit">Elément &lt;button&gt;</button> 
<input class="btn btn-primary" type="button" value="Elément input"> 

Voici l’affichage obtenu :

images/C09-001.png

Les trois éléments utilisent la classe .btn pour avoir la fonctionnalité de bouton et la classe .btn-primary pour obtenir l’aspect standard des boutons Bootstrap.

2. Les boutons colorés

Vous pouvez ajouter les classes .btn-couleur pour colorer les boutons. Le suffixe couleur indique la couleur à appliquer. Les valeurs de couleur sont celles que nous avons vues de nombreuse fois précédemment.

Voici le code utilisé dans cet exemple :

<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-secondary">Secondary</button> ...

Les blocs de boutons

Vous pouvez insérer des boutons en bloc qui soient responsives et affichés en pleine largeur. Pour cela, nous allons utiliser des classes « utilitaires » dédiées à la mise en forme.

Le dossier à télécharger pour ces exemples est nommé 09-Boutons-02.

1. Des boutons en pleine largeur

Voyons ce premier exemple :

<div class="col"> 
  <div class="d-grid gap-2"> 
    <button class="btn btn-primary" type="button">Bouton 1</button> 
    <button class="btn btn-primary" type="button">Bouton 2</button> 
    <button class="btn btn-primary" type="button">Bouton 3</button> 
    <button class="btn btn-primary" type="button">Bouton 4</button> 
  </div> 
</div> 

Voici l’affichage obtenu sur un écran large :

images/5new22-042.png

Voici l’affichage obtenu sur une largeur d’écran plus petite :

images/5new22-043.png

Les boutons s’adaptent bien à la largeur disponible dans la colonne qui dépend de la largeur de l’écran de diffusion.

Dans la colonne, la boîte <div> contenant les boutons utilise deux classes. La classe .d-grid permet d’utiliser une grille...

Les groupes de boutons

Vous pouvez regrouper des boutons ayant des fonctionnalités associées. Chaque bouton aura sa propre action.

Le dossier à télécharger pour cet exemple est nommé 09-Boutons-03.

Voici le code utilisé pour cet exemple :

<div class="btn-toolbar" role="toolbar" 
aria-label="Groupe de boutons"> 
   <div class="btn-group me-2" role="group" aria-label="Premier groupe"> 
      <button type="button" class="btn btn-secondary"> Crassus</button> 
      <button type="button" class="btn btn-secondary"> Justo</button> 
      <button type="button" class="btn btn-secondary">Odio</button> 
      <button type="button" class="btn btn-secondary"> Dapibus</button> 
   </div> 
   <div class="btn-group me-2" role="group" aria-label="Second groupe"> 
      <button type="button" class="btn btn-secondary"> Facilisis</button> 
      <button type="button" class="btn btn-secondary">...

Les boutons déroulants

1. L’objectif

Les boutons déroulants permettent d’afficher un menu déroulant suite à un clic sur un bouton. Le bouton va utiliser les classes .btn et .dropdown-toggle et peuvent s’appliquer soit à un élément <a>, soit à un élément <button>.

Le dossier à télécharger pour ces exemples est nommé 09-Boutons-04.

2. Un bouton déroulant simple

Voici le code utilisé pour ce premier exemple :

<div class="dropdown"> 
   <button class="btn btn-primary dropdown-toggle" type="button" 
id="boutonderoulant" data-bs-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false"> 
        Lorem Ipsum 
   </button> 
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
        <a class="dropdown-item" href="#">Sem Vulputate</a> 
        <a class="dropdown-item" href="#">Ullamcorper Egestas</a> 
        <a class="dropdown-item" href="#">Dapibus Tellus </a> 
   </div> 
</div> 

Voici l’aperçu initial :

images/C09-011.png

Voici le bouton déroulé, suite à un clic :

images/C09-012.png

Étudions la structure de ce bouton déroulant.

Le conteneur général est une boîte ’<div> ayant la classe dédiée .dropdown : <div class="dropdown">.

Le bouton déclencheur est un élément <button>, avec les classes de mise en forme .btn et .dropdown-toggle. Il possède un identifiant id="boutonderoulant" qui sera utilisé par le menu. L’attribut data-toggle="dropdown"...