Outils pour utilisateurs
html_css:bootstrap4:onglets
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Prochaine révision | Révision précédente | ||
|
html_css:bootstrap4:onglets [2019/06/22 05:59] marclebrun créée |
html_css:bootstrap4:onglets [2020/06/12 12:22] (Version actuelle) marclebrun [Classes] |
||
|---|---|---|---|
| Ligne 37: | Ligne 37: | ||
| ===== Classes ===== | ===== Classes ===== | ||
| - | ^UL |nav nav-tabs | | + | ^UL |**nav nav-tabs** | |
| - | ^LI |nav-item | | + | ^LI |**nav-item** | |
| - | ^A |nav-link | | + | ^A |**nav-link** | |
| - | ^ |active | | + | ^ |**active** | |
| - | ^DIV |tab-content pour la div globale contenant les pages| | + | ^DIV |**tab-content** pour la div globale contenant les pages| |
| - | ^ |tab-pane pour les divs correspondant aux pages | | + | ^ |**tab-pane** pour les divs correspondant aux pages | |
| - | ^ |fade pour ajouter un effet de fondu entre les pages| | + | ^ |**fade** pour ajouter un effet de fondu entre les pages| |
| - | ^ |show active pour la page actuellement affichée | | + | ^ |**show active** pour la page actuellement affichée | |
| + | <code html> | ||
| <div class="container-fluid"> | <div class="container-fluid"> | ||
| Ligne 58: | Ligne 59: | ||
| <div class="tab-content"> | <div class="tab-content"> | ||
| - | <div class="tab-pane fade show active"> | + | <div class="tab-pane fade active"> |
| <p>Page "Products"</p> | <p>Page "Products"</p> | ||
| </div> | </div> | ||
| Ligne 73: | Ligne 74: | ||
| </div> | </div> | ||
| - | Roles | + | </code> |
| - | UL tablist | + | |
| - | A tab | + | ===== Roles ===== |
| - | DIV tabpanel (pour les divs correspondant aux pages) | + | |
| + | ^UL | **tablist** | | ||
| + | ^A | **tab** | | ||
| + | ^DIV | **tabpanel** (pour les divs correspondant aux pages) | | ||
| + | |||
| + | <code html> | ||
| <div class="container-fluid"> | <div class="container-fluid"> | ||
| Ligne 104: | Ligne 110: | ||
| </div> | </div> | ||
| - | Data | + | </code> |
| - | A data-toggle="tab" | + | |
| + | ===== Data ===== | ||
| + | |||
| + | ^A | **data-toggle="tab"** | | ||
| + | |||
| + | <code html> | ||
| <ul ...> | <ul ...> | ||
| <li ...><a data-toggle="tab">Products</a></li> | <li ...><a data-toggle="tab">Products</a></li> | ||
| Ligne 111: | Ligne 122: | ||
| <li ...><a data-toggle="tab">Admin</a></li> | <li ...><a data-toggle="tab">Admin</a></li> | ||
| </ul> | </ul> | ||
| - | Identifiants et liens | + | </code> |
| - | A Chaque lien a un href correspondant à l'id de la page qu'il affiche | + | |
| - | DIV Chaque page a un id | + | ===== Identifiants et liens ===== |
| + | |||
| + | ^DIV | Chaque page a un **id** | | ||
| + | ^A | Chaque lien a un **href** correspondant à l'**id** de la page qu'il affiche | | ||
| + | |||
| + | <code html> | ||
| <div class="container-fluid"> | <div class="container-fluid"> | ||
| Ligne 141: | Ligne 157: | ||
| </div> | </div> | ||
| + | </code> | ||
html_css/bootstrap4/onglets.1561183154.txt.gz · Dernière modification: 2019/06/22 05:59 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
