Différences entre versions de « Header Tabs »
De Mi caja de notas
| (2 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 7 : | Ligne 7 : | ||
<div class="tabs-content"> | <div class="tabs-content"> | ||
<div class="content active" id="panel1"> | <div class="content active" id="panel1"> | ||
| − | <p>Voici le premier tableau | + | <p>Voici le premier tableau d'un exemple d'onglet basique. Vous pouvez placer tous les types de contenu ici y compris avec une grille.</p> |
</div> | </div> | ||
<div class="content" id="panel2"> | <div class="content" id="panel2"> | ||
| − | <p> | + | <p>Voici le second tableau d'un exemple d'onglet basique. C'est le second panneau d'un exemple d'onglet basique.</p> |
</div> | </div> | ||
<div class="content" id="panel3"> | <div class="content" id="panel3"> | ||
| Ligne 16 : | Ligne 16 : | ||
</div> | </div> | ||
<div class="content" id="panel4"> | <div class="content" id="panel4"> | ||
| + | <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | === Onglets verticaux === | ||
| + | Créer un groupe d'onglets verticaux avec un minimum de balisae. Ajouter simplement la classe "vertical" change l'orientation des onglets horizontaux. | ||
| + | |||
| + | HTML MARKUP | ||
| + | <ul class="tabs vertical" data-tab> | ||
| + | <li class="tab-title active"><a href="#panel11">Onglet 1</a></li> | ||
| + | <li class="tab-title"><a href="#panel21">Onglet 2</a></li> | ||
| + | <li class="tab-title"><a href="#panel31">Onglet 3</a></li> | ||
| + | <li class="tab-title"><a href="#panel41">Onglet 4</a></li> | ||
| + | </ul> | ||
| + | <div class="tabs-content"> | ||
| + | <div class="content active" id="panel11"> | ||
| + | <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p> | ||
| + | </div> | ||
| + | <div class="content" id="panel21"> | ||
| + | <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> | ||
| + | </div> | ||
| + | <div class="content" id="panel31"> | ||
| + | <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p> | ||
| + | </div> | ||
| + | <div class="content" id="panel41"> | ||
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> | <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> | ||
</div> | </div> | ||
</div> | </div> | ||
Version actuelle datée du 27 septembre 2020 à 19:52
Voici le premier tableau d'un exemple d'onglet basique. Vous pouvez placer tous les types de contenu ici y compris avec une grille.
Voici le second tableau d'un exemple d'onglet basique. C'est le second panneau d'un exemple d'onglet basique.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
Onglets verticaux
Créer un groupe d'onglets verticaux avec un minimum de balisae. Ajouter simplement la classe "vertical" change l'orientation des onglets horizontaux.
HTML MARKUP
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.