Menu déroulant Bootstrap4

Le menu déroulant Bootstrap 4 est un composant d'interface utilisateur très courant utilisé pour afficher une série d'options cliquables ou d'éléments de menu.

Les menus déroulants Bootstrap4 sont généralement utilisés dans les barres de navigation, les formulaires ou d'autres interfaces interactives.

Structure de base

Le cœur du menu déroulant Bootstrap 4 est la.dropdownclasse, qui peut imbriquer d'autres éléments (tels que des boutons, des liens ou du texte) pour déclencher l'affichage du menu. Les éléments de menu eux-mêmes sont identifiés à l'aide de la classe .dropdown-menu, et les options spécifiques utilisent la classe .dropdown-item.

Les menus déroulants Bootstrap4 dépendent depopper.min.js。

Description de la classe de style :

Nom de classe	Description	Exemple d'utilisation
`.dropdown`	Classe de conteneur pour le menu déroulant, englobant le bouton et le menu.	`<div class="dropdown">...</div>`
`.dropdown-toggle`	Utilisé pour créer le bouton qui déclenche le menu déroulant, généralement combiné avec le`.btn`class.	`<button class="btn btn-secondary dropdown-toggle">...</button>`
`data-toggle="dropdown"`	Permet au bouton ou au lien de déclencher l'affichage et le masquage du menu déroulant.	`<button data-toggle="dropdown">Dropdown button</button>`
`.dropdown-menu`	Classe de conteneur pour le menu déroulant, contenant les éléments du menu.	`<div class="dropdown-menu">...</div>`
`.dropdown-item`	Un élément de menu dans le menu déroulant, généralement un lien.	`<a class="dropdown-item" href="../index.html">Item</a>`
`aria-haspopup="true"`	Ajoute la prise en charge de l'accessibilité, indiquant que cet élément possède un menu contextuel.	`<button aria-haspopup="true">Dropdown</button>`
`aria-expanded="false"`	Ajoute la prise en charge de l'accessibilité, indiquant l'état actuel du menu (déployé ou replié).	`<button aria-expanded="false">Dropdown</button>`

Le menu déroulant peut être basculé et est un menu contextuel qui affiche des liens sous forme de liste.

Exemple

<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Bouton déroulant </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Lien 1</a> <a class="dropdown-item" href="#">Lien 2</a> <a class="dropdown-item" href="#">Lien 3</a> </div> </div>

Essayez-le vous-même »

Analyse de l'exemple

.dropdownLa classe est utilisée pour spécifier un menu déroulant.

Nous pouvons utiliser un bouton ou un lien pour ouvrir le menu déroulant. Le bouton ou le lien doit ajouter le.dropdown-toggleetdata-toggle="dropdown"attribut.

<div>Ajoutez sur l'élément.dropdown-menuclasse pour configurer le menu déroulant, puis ajoutez la.dropdown-itemclasse aux options du menu déroulant.

Nous pouvons aussi l'utiliser dans la<a>balise :

Exemple

<div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lien déroulant </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Une autre action</a> <a class="dropdown-item" href="#">Autre chose ici</a> </div> </div>

Essayez-le vous-même »

Séparateur dans le menu déroulant

.dropdown-dividerLa classe est utilisée pour créer un séparateur horizontal dans le menu déroulant :

Exemple

Essayez-le vous-même »

En-tête dans le menu déroulant

.dropdown-headerLa classe est utilisée pour ajouter un en-tête dans le menu déroulant :

Exemple

<div class="dropdown-header">En-tête de menu déroulant 1</div>

Essayez-le vous-même »

Éléments actifs et désactivés dans le menu déroulant

La classe .active mettra en surbrillance l'option dans le menu déroulant (en ajoutant un fond bleu).

Si vous souhaitez désactiver une option dans le menu déroulant, vous pouvez utiliser la classe.disabled.

Exemple

<a class="dropdown-item active" href="#">Actif</a> <a class="dropdown-item disabled" href="#">Désactivé</a>

Essayez-le vous-même »

Positionnement du menu déroulant

Si nous voulons que le menu déroulant soit aligné à droite, nous pouvons ajouter à l'élément la classe .dropdown-menu puis la.dropdown-menu-rightclasse.

Exemple

Essayez-le vous-même »

Paramètres de direction d'ouverture du menu déroulant

La direction d'ouverture par défaut du menu déroulant est vers le bas, mais nous pouvons également définir différentes directions.

Spécifier un menu déroulant qui s'ouvre vers la droite

Si vous voulez que le menu déroulant s'ouvre vers la droite, vous pouvez ajouter la"dropright"classe à l'élément div :

Exemple

<div class="btn-group dropright"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropright </button> <div class="dropdown-menu">  </div> </div>  <div class="btn-group dropright"> <button type="button" class="btn btn-secondary"> Fractionné dropright </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Basculer Dropright</span> </button> <div class="dropdown-menu">  </div> </div>

Essayez-le vous-même »

Spécifier un menu Dropup qui s'ouvre vers le haut

Si vous souhaitez que le menu dropup s'ouvre vers le haut, vous pouvez ajouter la"dropup"classe :

Exemple

<div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup </button> <div class="dropdown-menu">  </div> </div>  <div class="btn-group dropup"> <button type="button" class="btn btn-secondary"> Dropup fractionné </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Basculer le menu déroulant</span> </button> <div class="dropdown-menu">  </div> </div>

Essayez-le vous-même »

Spécifier un menu déroulant qui s'ouvre vers la gauche

Si vous souhaitez que le menu déroulant s'ouvre vers le haut, vous pouvez ajouter la"dropleft"classe :

Exemple

<div class="btn-group dropleft"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropleft </button> <div class="dropdown-menu">  </div> </div>  <div class="btn-group"> <div class="btn-group dropleft" role="group"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Basculer Dropleft</span> </button> <div class="dropdown-menu">  </div> </div> <button type="button" class="btn btn-secondary"> Fractionné dropleft </button> </div>

Essayez-le vous-même »

Texte du menu déroulant

.dropdown-item-textLa classe peut définir des éléments texte dans le menu déroulant :

Exemple

<div class="dropdown-menu"> <a class="dropdown-item" href="#">Lien 1</a> <a class="dropdown-item" href="#">Lien 2</a> <a class="dropdown-item-text" href="#">Lien textuel</a> <span class="dropdown-item-text">Texte uniquement</span> </div>

Essayez-le vous-même »

Menu déroulant dans un bouton

Nous pouvons ajouter un menu déroulant dans un bouton:

Exemple

<div class="btn-group"> <button type="button" class="btn btn-primary">Sony</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablette</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div>

Essayez-le vous-même »

Groupe de boutons vertical avec menu déroulant:

Exemple

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablette</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>

Essayez-le vous-même »

Autres extensions