Tutoriel Bootstrap

Bootstrap

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

HTML HTML5 CSS Dreamweaver PHP

Menus à onglet

Pour obtenir différents styles de menu à onglet avec Boostrap, nous utiliserons la classe ".nav" (indispensable dans la conception d'un menu) et les classes ".nav-tabs", ".nav-pills", ".nav-stacked" et ".nav-justified" qui elles permettront de peronnaliser le design du menu.

Pour utiliser pleinement les fonctionnalités des menus à onglet, il faudra utiliser le plugin JavaScript tabs et ajouter des balises "role" et les attributs "aria" dans votre code HTML.

En savoir +

Menu à onglet classique (tab)

<ul class="nav nav-tabs">
 <li role="presentation" class="active"><a href="#">Programme de formation</a></li>
 <li role="presentation"><a href="#">Public</a></li>
 <li role="presentation"><a href="#">Objectifs</a></li>
</ul>

Exemple

Menu à onglet arrondi (pills)

<ul class="nav nav-pills">
  ...
</ul>

Exemple

Ce menu peut passer à la verticale

Pour cela, il faudra utiliser la classe ".nav-stacked".
<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Exemple

Menu à onglet justifié

Vous pouvez obtenir des onglets de même taille et justifié avec la classe ".nav-justify".

Un bug sur le rendu se produit sur Safari quand on redimensionne horizontalement le navigateur. Celui ci se corrige lorsque l'on rafraichit.
Voir le bug.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>

Exemple

Lien désactivé

Pour désactiver un lien, il suffit d'utiliser la classe ".disabled".
<ul class="nav nav-tabs">
 <li role="presentation" class="active"><a href="#">Programme de formation</a></li>
 <li role="presentation"><a href="#">Public</a></li>
 <li role="presentation" class="disabled"><a href="#">Objectifs</a></li>
</ul>

Exemple

Menu à onglet avec menu déroulant

Pour ajouter un menu déroulant, il faudra le plugin JavaScript dropdowns et adapter un peu de code HTML

Il peut être utilisé avec nav-tabs ou nav-pills

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Programme de formation</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Public <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#" title="Pour qui ?">Pour qui ?</a></li>
      <li><a href="#" title="Comment financer ?">Comment financer ?</a></li>
    </ul>

  </li>
  <li role="presentation"><a href="#">Objectifs</a></li>
</ul>

Exemple

Menu à onglet avec le détail de chaque onglet

<ul class="nav nav-pills">
  <li class="active"><a href="#tab1" data-toggle="tab">Programme</a></li>
  <li><a href="#tab2" data-toggle="tab">Public</a></li>
  <li><a href="#tab3" data-toggle="tab">Objectifs</a></li>
  <li><a href="#tab4" data-toggle="tab">En complément</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">Vous pouvez consulter le détail du programme</div>
  <div class="tab-pane" id="tab2">Vous pouvez consulter le détail sur le public</div>
  <div class="tab-pane" id="tab3">Vous pouvez consulter le détail des objectifs pédagogiques</div>
  <div class="tab-pane" id="tab4">Vous pouvez consulter le détail des compléments</div>
</div>

Exemple

Vous pouvez consulter le détail du programme
Vous pouvez consulter le détail sur le public
Vous pouvez consulter le détail des objectifs pédagogiques
Vous pouvez consulter le détail des compléments

 

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 |