Sommaire

Un bouton déroulant simple COMPOSANTS POUR LES BOUTONS:Bouton déroulant simple

Bootstrap nous permet d’afficher une liste de boutons avec un simple clic du bouton principal.

L’ensemble des boutons est placé dans une boîte <div class="btn-group">. Le bouton actif est un élément <button> avec la classe .dropdown-toggle et l’attribut data-toggle="dropdown".

La liste des boutons déroulants est dans une liste <ul> ayant la classe .dropdown-menu.

Voici le code HTML :

<div class="btn-group"> 
   <button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">Choisissez <span class="caret"></span></button>
   <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">WordPress</a></li> 
      <li><a href="#">Joomla</a></li> 
      <li><a href="#">Drupal</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Bolt</a></li> 
   </ul> 
</div>

Voici l’affichage du bouton inactif :

images/C11-008.png

Voici la liste des boutons déroulés :

images/C11-009.png

Initialement, les boutons de la liste <ul class="dropdown-menu"> ne sont pas affichés. En effet, nous ...