Français

Bootstrap 教程

Bootstrap 布局

Bootstrap 内容

Bootstrap 组件

Bootstrap 表单

Bootstrap 辅助工具

Bootstrap 实用工具

Bootstrap 演示

Bootstrap - Menu déroulants : Un guide pour les débutants

Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des menu déroulants de Bootstrap. En tant que votre enseignant bienveillant en informatique, je suis excité de vous guider dans cette aventure. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer de zéro et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Bootstrap - Dropdowns

Qu'est-ce que les menu déroulants ?

Avant de nous pencher sur le code, parlons de ce que sont les menu déroulants. Imaginez que vous êtes dans un restaurant, et que le serveur vous tend une carte. Cette carte est comme un menu déroulant - elle vous offre une liste d'options à choisir. Dans la conception web, les menu déroulants fonctionnent de manière similaire. Ils sont des moyens compacts de présenter plusieurs choix aux utilisateurs sans encombrer votre page web.

Menu déroulant de base

Commençons par le menu déroulant le plus basique. Voici à quoi il ressemble dans Bootstrap :

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Bouton de menu déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>
</div>

Décomposons cela :

  1. Nous commençons par un <div> avec la classe dropdown. C'est notre conteneur.
  2. À l'intérieur, nous avons un <button> qui déclenche le menu déroulant. Notez la classe dropdown-toggle et l'attribut data-bs-toggle="dropdown".
  3. Le <ul> avec la classe dropdown-menu est notre contenu réel de menu déroulant.
  4. Chaque <li> à l'intérieur du <ul> est un élément dans notre menu déroulant.

Bouton vs. Lien de menu déroulant

Vous pouvez créer un menu déroulant en utilisant soit un bouton soit un lien. Voici comment ils diffèrent :

Bouton de menu déroulant

Nous l'avons déjà vu dans notre exemple de base. Il utilise l'élément <button> :

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Bouton de menu déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Lien de menu déroulant

Pour un menu déroulant basé sur un lien, nous utilisons une balise <a> à la place :

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Lien de menu déroulant
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Éléments du menu -->
</ul>
</div>

La principale différence est l'élément HTML utilisé (<button> vs. <a>), mais ils fonctionnent de manière similaire.

Variantes

Bootstrap propose diverses variantes de couleurs pour vos menu déroulants. Vous pouvez remplacer la classe btn-secondary par l'une de ces options :

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

Par exemple :

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu déroulant danger
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Bouton divisé

Un bouton divisé sépare l'action du bouton de la bascule du menu déroulant :

<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Basculer le menu déroulant</span>
</button>
<ul class="dropdown-menu">
<!-- Éléments du menu -->
</ul>
</div>

Ici, cliquer sur la partie gauche du bouton effectue une action, tandis que la partie droite ouvre le menu déroulant.

Tailles

Vous pouvez créer des menu déroulants plus grands ou plus petits en ajoutant les classes btn-lg ou btn-sm :

Bouton de menu déroulant large

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Grand menu déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Éléments du menu -->
</ul>
</div>

Bouton de menu déroulant petit

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Petit menu déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Éléments du menu -->
</ul>
</div>

Menu déroulant sombre

Pour un menu déroulant avec un thème sombre, ajoutez la classe dropdown-menu-dark à votre dropdown-menu :

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu déroulant sombre
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Directions

Bootstrap vous permet de changer la direction de vos menu déroulants. Explorons ces options :

Menu déroulant centré

Pour centrer votre menu déroulant, ajoutez la classe dropdown-center au conteneur :

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu déroulant centré
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Éléments du menu -->
</ul>
</div>

Dropup

Pour un menu déroulant qui s'ouvre vers le haut, utilisez la classe dropup :

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Dropup centré

Combinez dropup et dropdown-center pour un dropup centré :

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup centré
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Éléments du menu -->
</ul>
</div>

Dropend

Pour un menu déroulant qui s'ouvre à droite, utilisez la classe dropend :

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Dropstart

Pour un menu déroulant qui s'ouvre à gauche, utilisez la classe dropstart :

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Éléments du menu

Maintenant, parlons de ce qui va à l'intérieur de votre menu déroulant. Vous avez plusieurs options :

En-têtes

Ajoutez un en-tête pour regrouper les éléments du menu :

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">En-tête du menu déroulant</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
</ul>

Séparateurs

Utilisez des séparateurs pour séparer des groupes d'éléments du menu liés :

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>

Texte

Vous pouvez également inclure du texte non interactif :

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
<li><span class="dropdown-item-text">Texte de l'élément du menu</span></li>
</ul>

Formulaires

Vous pouvez même inclure des formulaires dans vos menu déroulants :

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Adresse e-mail</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Mot de passe">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Se souvenir de moi
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Se connecter</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Nouveau ici ? S'inscrire</a>
<a class="dropdown-item" href="#">Mot de passe oublié ?</a>
</div>

Alignement du menu

Par défaut, les menus déroulants sont alignés à gauche. Vous pouvez changer cela avec des classes d'alignement :

Menu déroulant aligné à droite

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu déroulant aligné à droite
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Alignement responsive

Vous pouvez également rendre l'alignement responsive :

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Aligné à gauche mais aligné à droite sur grand écran
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Ce menu déroulant sera aligné à gauche par défaut, mais aligné à droite sur les écrans plus grands.

Options des menu déroulants

Les menu déroulants Bootstrap comportent quelques options supplémentaires :

Comportement de fermeture automatique

Vous pouvez contrôler comment le menu déroulant se ferme avec l'attribut data-bs-auto-close :

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Cliquable à l'extérieur
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Éléments du menu -->
</ul>
</div>

Options pour data-bs-auto-close :

  • true (par défaut) : Ferme le menu déroulant en cliquant à l'extérieur ou à l'intérieur du menu déroulant
  • false : Le menu déroulant ne se ferme pas en cliquant à l'extérieur ou à l'intérieur
  • inside : Ferme le menu déroulant en cliquant à l'intérieur du menu déroulant
  • outside : Ferme le menu déroulant en cliquant à l'extérieur du menu déroulant

Et voilà ! Vous avez刚刚完成了一次Bootstrap菜单导航的旋风之旅。记住，熟能生巧，所以不要害怕尝试这些例子。快乐编码，愿你的下拉菜单总是向正确的方向展开！

Credits: Image by storyset

Tutoriel précédent:
Bootstrap - Collapse
Tutoriel suivant:
Bootstrap - Groupe de liste