Dropdown Basic
Un menu déroulant est un menu toggleable qui permet à l'utilisateur de choisir une valeur à partir d'une liste prédéfinie:
Exemple
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Essayez - le vous - même » Exemple Explained
La .dropdown classe indique un menu déroulant.
Pour ouvrir le menu déroulant, utilisez un bouton ou un lien avec une classe de .dropdown-toggle et data-toggle="dropdown" attribut.
La .caret classe crée une icône caret flèche ( ) ( ) ( ) , Ce qui indique que le bouton est un menu déroulant.
Ajoutez le .dropdown-menu classe à un <ul> élément réellement construire le menu déroulant.
diviseur dropdown
La .divider classe est utilisée pour des liens distincts à l' intérieur du menu déroulant avec une bordure horizontale mince:
dropdown Header
Le .dropdown-header de classe est utilisé pour ajouter des en- têtes dans le menu déroulant:
Désactiver un élément
Pour désactiver un élément dans le menu déroulant, utilisez la .disabled classe:
Position dropdown
A droite aligner la liste déroulante, ajoutez le .dropdown-menu-right classe à l'élément avec .dropdown menu:
Déposer jusqu'à
Si vous voulez que le menu déroulant pour étendre vers le haut au lieu de vers le bas, changer le <div> élément avec class="dropdown" à "dropup" :
Accessibilité dropdown
Pour aider à améliorer l' accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure ce qui suit role et aria-* attributs, lors de la création d' un menu déroulant:
Exemple
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Remplissez Bootstrap Dropdown Référence
Pour une référence complète de toutes les options déroulantes, des méthodes et des événements, rendez - vous à notre Bootstrap JS Dropdown Référence .