• Onglet 1
• Onglet 2
• Onglet 3

Comment créer des onglets ?

1. Ouvrir l'article Matrice onglet.
2. Dans Contenu, cliquer sur le bouton Modifier du premier composant Texte.
3. Cliquer sur le bouton Source, tout sélectionner et copier.
4. Fermer l'article Matrice onglet.
5. Créer un nouvel article, puis un nouveau composant Texte.
6. Dans Contenu, cliquer sur le bouton Modifier du premier composant Texte et coller le contenu précédemment copié.

Structure du code

=== 1ère partie : les boutons des onglets ===

‹ul class="nav nav-pills"›

‹li class="active"›‹a data-toggle="tab" href="#tab1"›Onglet 1‹/a›‹/li›

‹li›‹a data-toggle="tab" href="#tab2"›Onglet 2‹/a›‹/li›

‹li›‹a data-toggle="tab" href="#tab3"›Onglet 3‹/a›‹/li›

‹/ul›

=== 2ème partie : les contenus des onglets ===

‹div class="tab-content"›

‹div class="tab-pane active" id="tab1"›
‹p›Contenu de l'onglet 1‹/p›
‹/div›

‹div class="tab-pane" id="tab2"›
‹p›Contenu de l'onglet 2‹/p›
‹/div›

‹div class="tab-pane" id="tab3"›
‹p›Contenu de l'onglet 3‹/p›
‹/div›

‹/div›

Relations entre boutons et contenus

• Dans les boutons : href="#tab1"
• Dans les contenus : id="tab1"
• Dans cet exemple, c'est tab1 qui associé le bouton au contenu. On aurait pu écrire toto ou titi, l'important étant que ce soit la même chaîne de caractères (sans espace ni accent).

Pour créer un nouvel onglet

• Copier coller un paragraphe de bouton et un paragraphe de contenu, en modifiant href="xxx" et id="xxx", xxx devant être unique.
• Une fois que la structure est créée, cliquer de nouveau sur le bouton Source et éditer l'article en remplaçant "onglet x" et "contenu de l'onglet x" par les contenus souhaités.
• Il est pratique de se placer en plein écran (dernier icône de la barre d'outils) pour saisir.

Pour supprimer un onglet

• Supprimer à la fois le paragraphe du bouton et celui du contenu.

Présentation des onglets

Dans la première ligne, nav-pills peut être remplacé par nav-tabs pour un look sous forme d'onglet.