Sommaire

Les boutons déroulants COMPOSANTS POUR LES BOUTONS:Boutons déroulants

Bootstrap nous permet d’afficher des boutons déroulants. Au clic d’un bouton, un autre groupe de boutons apparaît.

Nous allons utiliser deux boîtes <div class="btn-group"> : une pour la barre des boutons principale et une autre pour les boutons déroulants.

Le bouton actif (le bouton Annexes dans cet exemple), celui qui déclenche l’affichage des boutons déroulants a pour classe .dropdown-toggle et possède l’attribut data-toggle="dropdown".

Les boutons déroulants sont placés dans une liste <ul> ayant pour classe .dropdown-menu.

Voici le code HTML :

<div class="btn-group"> 
   <button type="button" class="btn btn-default">Introduction</button> 
   <button type="button" class="btn btn-default">Résultats</button> 
   <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown">Annexes<span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
         <li><a href="#">Tableaux</a></li> 
         <li><a href="#">Figures</a></li> 
      </ul>  ...