Différences entre versions de « Header Tabs »
De Mi caja de notas
| 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 === | ||
| + | |||
| + | Vertical Tabs | ||
| + | You can create a group of vertical tabs using minimal markup. Just adding the class vertical changes the orientation of horizontal tabs. | ||
| + | |||
| + | HTML MARKUP | ||
| + | <ul class="tabs vertical" data-tab> | ||
| + | <li class="tab-title active"><a href="#panel11">Tab 1</a></li> | ||
| + | <li class="tab-title"><a href="#panel21">Tab 2</a></li> | ||
| + | <li class="tab-title"><a href="#panel31">Tab 3</a></li> | ||
| + | <li class="tab-title"><a href="#panel41">Tab 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 du 27 septembre 2020 à 19:51
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
Vertical Tabs You can create a group of vertical tabs using minimal markup. Just adding the class vertical changes the orientation of horizontal tabs.
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.