Cramnurbel

Outils pour utilisateurs

Outils du site

Vous êtes ici: Accueil » HTML / CSS » Bootstrap 4 » Onglets (Tabs)

Panneau latéral

Plan du Site:

html_css:bootstrap4:onglets

Table des matières

Onglets (Tabs)

Pour simplifier les choses, cet exemple n'inclut aucune balise aria pour l'instant.

Structure générale

<div class="container-fluid">
 
    <!-- ONGLETS -->
    <ul ...>
        <li ...><a ...>Products</a></li>
        <li ...><a ...>Orders</a></li>
        <li ...><a ...>Admin</a></li>
    </ul>
 
    <!-- PAGES -->
    <div ...>
 
        <div ...>
            <p>Page "Products"</p>
        </div>
 
        <div ...>
            <p>Page "Orders"</p>
        </div>
 
        <div ...>
            <p>Page "Admin"</p>
        </div>
 
    </div>
 
</div>

Classes

UL nav nav-tabs
LI nav-item
A nav-link
active
DIV tab-content pour la div globale contenant les pages
tab-pane pour les divs correspondant aux pages
fade pour ajouter un effet de fondu entre les pages
show active pour la page actuellement affichée 
<div class="container-fluid">
 
    <!-- ONGLETS -->
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active">Products</a></li>
        <li class="nav-item"><a class="nav-link">Orders</a></li>
        <li class="nav-item"><a class="nav-link">Admin</a></li>
    </ul>
 
    <!-- PAGES -->
    <div class="tab-content">
 
        <div class="tab-pane fade active">
            <p>Page "Products"</p>
        </div>
 
        <div class="tab-pane fade">
            <p>Page "Orders"</p>
        </div>
 
        <div class="tab-pane fade">
            <p>Page "Admin"</p>
        </div>
 
    </div>
 
</div>

Roles

UL tablist
A tab
DIV tabpanel (pour les divs correspondant aux pages) 
<div class="container-fluid">
 
    <!-- ONGLETS -->
    <ul role="tablist">
        <li ...><a role="tab">Products</a></li>
        <li ...><a role="tab">Orders</a></li>
        <li ...><a role="tab">Admin</a></li>
    </ul>
 
    <!-- PAGES -->
    <div ...>
 
        <div role="tabpanel">
            <p>Page "Products"</p>
        </div>
 
        <div role="tabpanel">
            <p>Page "Orders"</p>
        </div>
 
        <div role="tabpanel">
            <p>Page "Admin"</p>
        </div>
 
    </div>
 
</div>

Data

A data-toggle=“tab” 
    <ul ...>
        <li ...><a data-toggle="tab">Products</a></li>
        <li ...><a data-toggle="tab">Orders</a></li>
        <li ...><a data-toggle="tab">Admin</a></li>
    </ul>

Identifiants et liens

DIV Chaque page a un id
A Chaque lien a un href correspondant à l'id de la page qu'il affiche 
<div class="container-fluid">
 
    <!-- ONGLETS -->
    <ul ...>
        <li ...><a href="#pageProducts">Products</a></li>
        <li ...><a href="#pageOrders">Orders</a></li>
        <li ...><a href="#pageAdmin">Admin</a></li>
    </ul>
 
    <!-- PAGES -->
    <div ...>
 
        <div id="pageProducts">
            <p>Page "Products"</p>
        </div>
 
        <div id="pageOrders">
            <p>Page "Orders"</p>
        </div>
 
        <div id="pageAdmin">
            <p>Page "Admin"</p>
        </div>
 
    </div>
 
</div>
html_css/bootstrap4/onglets.txt · Dernière modification: 2020/06/12 12:22 par marclebrun

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki