Tutoriel Bootstrap

Bootstrap

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

HTML HTML5 CSS Dreamweaver PHP

Menus déroulants (Dropdowns menus)

Dans ce tutoriel, je vous propose de découvrir les menus déroulants de Bootstrap.

Utilisation

Il faudra utiliser la classe .dropdown (si vous voulez un menu qui descend) ou .dropup (si vous voulez un menu qui monte).

Exemple 1 (menu qui descend)


<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu déroulant
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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 2 (menu qui monte)


<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu déroulant
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>

Header et divider

Vous pouvez ajouter une étiquette header dans votre menu avec la classe .dropdown-header et un séparateur avec la classe .divider

Exemple


<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu déroulant
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Etiquette header</li>
<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>
Pour désactiver un lien, il faut utiliser la classe .disabled
<li class="disabled"><a href="#" title="Lien 1">Lien 1</a></li>

 

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |