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 listes déroulantes Bootstrap 5 ?

570

Nous avons déjà abordé le composant déroulant dans notre précédent tutoriel sur les boutons Bootstrap. La liste déroulante n’est rien d’autre qu’un bouton (ou un lien) et affiche une liste lorsque vous cliquez dessus. Dans ce didacticiel, explorons différents types de listes déroulantes Bootstrap 5 avec des exemples. N’oubliez pas d’inclure bootstrap.bundled.min.js pour que la liste déroulante fonctionne. Vous pouvez consulter le modèle de démarrage ici.

Tutoriel Bootstrap 5 Dropdowns

  1. Fonctionnalités de base des listes déroulantes
  2. Création du bouton déroulant par défaut
  3. Ajout d’un diviseur
  4. Désactiver le lien dans la liste déroulante
  5. Liste déroulante avec alignement du menu à droite
  6. Bouton déroulant avec en-tête
  7. Dimensionnement du bouton déroulant
  8. Bouton de menu déroulant fractionné
  9. Bouton de décrochage fractionné
  10. Points à retenir

1 Les bases de Bootstrap 5 Listes déroulantes

  • Les listes déroulantes sont une liste basculante de liens ou d’éléments de bouton affichés vers le haut ou vers le bas.
  • Ceci est généralement utilisé pour les éléments de menu déroulant ou déroulant et les éléments de navigation de la barre latérale.
  • Il fonctionne sur la base du script Popper.js.
  • Vous devez inclure popper.min.js puis bootstrap.min.js dans la même séquence. Utilisez tous les exemples de ce didacticiel avec notre modèle de démarrage.
  • Il n’y aura pas d’attributs "rôle" ou "aria-" ajoutés à l’élément déroulant par défaut. Vous devez les insérer manuellement là où cela est nécessaire.
  • Les éléments de la liste déroulante peuvent être fermés en cliquant sur le bouton ou en cliquant à l’extérieur. Vous pouvez également utiliser la touche "Esc" pour fermer les éléments de la liste déroulante.

2 Création d’un bouton déroulant par défaut

Vous trouverez ci-dessous le code pour créer une liste déroulante par défaut dans Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Il produira le résultat suivant sur le navigateur :

Comment créer des listes déroulantes Bootstrap 5 ?

  • Fondamentalement, vous devez envelopper le contenu dans un div en utilisant la classe ".dropdown". Cela identifiera le bouton comme un bouton déroulant. Vous pouvez également utiliser une balise au lieu de bouton.
  • Le bouton (ou lien) doit être inclus dans la classe « .dropdown-toggle ». Dans cet exemple, nous avons utilisé la classe "btn-primary" pour créer le bouton avec la couleur primaire. Vous pouvez utiliser n’importe quelle classe utilitaire de couleur pour avoir un bouton de couleur différente.
  • Après le bouton, créez un menu déroulant avec des éléments.

3 Ajout de séparateurs dans le menu déroulant

Vous savez maintenant comment créer le bouton déroulant de base. Ajoutons quelques éléments décoratifs comme l’ajout d’un séparateur entre les éléments de menu et l’en-tête.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Le menu déroulant ressemblera à ci-dessous :

Comment créer des listes déroulantes Bootstrap 5 ?

4 Désactivation du lien dans l’élément de liste déroulante

Vous pouvez désactiver l’élément dans la liste déroulante pour éviter de cliquer :

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Nous avons utilisé le bouton d’information et désactivé le troisième lien. Déplacer la souris sur le lien désactivé affichera le symbole du curseur d’arrêt et vous ne pourrez pas cliquer dessus.

Comment créer des listes déroulantes Bootstrap 5 ?

5 Liste déroulante avec alignement du menu à droite

Comme vous l’avez remarqué dans les exemples ci-dessus, le menu par défaut sera affiché avec l’alignement à gauche. Vous pouvez le changer pour un alignement à droite en ajoutant la classe ".dropdown-menu-right" avec la classe ".dropdown-menu". N’oubliez pas que cela déplacera la zone de menu complète à droite du conteneur. Vous devez utiliser des styles CSS supplémentaires pour positionner correctement le menu sous l’élément de bouton déroulant.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Les éléments de menu alignés à droite ressembleront à ci-dessous :

Comment créer des listes déroulantes Bootstrap 5 ?

6 Bouton déroulant avec en-tête

Vous pouvez également ajouter un texte d’en-tête dans les éléments de menu à l’aide de la classe ".dropdown-header" avec l’une des balises H1 – H6. Généralement, l’en-tête est ajouté en haut du menu et n’est pas cliquable.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

La liste déroulante avec en-tête produira le résultat suivant :

Comment créer des listes déroulantes Bootstrap 5 ?

7 Dimensionnement des boutons déroulants

Faites en sorte que le bouton déroulant soit grand ou petit en utilisant les classes ".btn-lg" et ".btn-sm" comme ci-dessous :

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Notez que nous avons utilisé deux groupes de boutons pour afficher deux boutons en ligne, si vous souhaitez afficher un seul bouton (disons grand), vous pouvez utiliser la classe ".dropdown" par défaut.

Les grands et petits boutons déroulants sont indiqués ci-dessous :

Comment créer des listes déroulantes Bootstrap 5 ?

8 Bouton de menu déroulant fractionné

À partir de maintenant, nous avons vu différents types de liste déroulante sous la forme d’un seul bouton. Le bouton divisé comporte deux boutons, vous devez donc utiliser un groupe de boutons pour les afficher en ligne sans espace. Le fractionnement de deux boutons est activé à l’aide de la classe css « .dropdown-toggle-split ».

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Le bouton déroulant Split ressemblera à ci-dessous :

Comment créer des listes déroulantes Bootstrap 5 ?

9 Bouton de décrochage fractionné

Il s’agit simplement d’un style déroulant au lieu du menu déroulant par défaut utilisant la classe « .dropup ».

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Le bouton de partage déroulant ressemblera à ci-dessous :

Comment créer des listes déroulantes Bootstrap 5 ?

10 points importants à retenir

Le menu déroulant s’affichera automatiquement vers le bas ou vers le haut en fonction de la fenêtre d’affichage du navigateur. Par exemple, lorsque vous êtes à la fin de la page, les éléments du menu déroulant seront affichés au-dessus comme un menu déroulant.

L’élément de bouton dans la liste déroulante prend en charge toutes les classes d’utilitaires de couleur d’arrière-plan similaires au composant de bouton par défaut. Bootstrap 3 ne prend en charge que les liens pour les éléments de menu. Mais dans Bootstrap 4 et 5, chaque élément de menu peut être un élément de lien ou de bouton.


Apprendre Bootstrap 5 (Index )


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