Conseil Webmaster
Mes tutoriels
Contact

Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Boutons avec menu déroulant Bootstrap

Ce composant "button Dropdown" permet de faire des menus déroulants sur des boutons.
Button dropdowns nécéssite le plugin dropdown de Bootstrap.

Simple bouton avec menu déroulant

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu déroulant <span class="caret"></span>
  <button>
  <ul class="dropdown-menu">
     <li><a href="#" title="Lien 1">Lien 1</a></li>
     <li><a href="#" title="Lien 2">Lien 2</a></li>
     <li><a href="#" title="Lien 3">Lien 3</a></li>
     <li role="separator" class="divider"< </li>
     <li><a href="#" title="Lien 4">Lien 4></a></li>
  </ul>
</div>

Exemple

Bouton divisé avec menu déroulant

<div class="btn-group">
  <button type="button" class="btn btn-default">Menu déroulant</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="caret"></span>
   <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#" title="Lien 1">Lien 1</a></li>
     <li><a href="#" title="Lien 2">Lien 2</a></li>
     <li><a href="#" title="Lien 3">Lien 3</a></li>
     <li role="separator" class="divider"</li>
     <li><a href="#" title="Lien 4">Lien 4</a></li>
  </ul>
</div>

Exemple

Taille des boutons

Il est possible de gérer la taille des boutons avec les classes btn-lg, btn-sm et btn-xs.
<!-- Large groupe de bouton -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bouton large <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1>/a></li>
<li><a href="#" title="Lien 2">Lien 2>/a></li>
</ul>
</div>

<!-- Petit groupe de bouton -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Petit bouton <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li><a href="#" title="Lien 2">Lien 2</a></li>
</ul>
</div>

<!-- Trés petit groupe de bouton -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
trés petit bouton <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li><a href="#" title="Lien 2">Lien 2</a></li>
</ul>
</div>

Exemple

Menu déroulant qui monte

En ajoutant la classe .dropup, vous pouvez faire monter le menu à la place de le faire descendre
<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Menu déroulant qui va vers le haut</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">     <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<i><a href="#" title="Lien 2">Lien 2</a></li>
  </ul>
</div>

Exemple

Menu déroulant qui monte calé sur la droite

En ajoutant la classe .dropdown-menu-right dans la balise <ul>, vous pouvez caler le menu sur la droite.
<div class="btn-group dropup">
   <button type="button" class="btn btn-default">Menu déroulant qui va vers le haut à droites</button>
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-right">
     <li><a href="#" title="Lien 1">Lien 1</a></li>
     <li><a href="#" title="Lien 2">Lien 2</a></li>
  </ul>
</div>

Exemple