Pills

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utiliser pour styliser une liste de navigation et pour apporter de l'attention sur un lien actif.

Conception et codage

Utilisation de base

Défaut

Les listes de navigation existent horizontalement.

Apparence
Bonne utilisation

Point de conformité :

Mauvaise utilisation

Point de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<ul class="nav nav-pills">
 <li class="active"><a href="#">A</a></li>
 <li><a href="#">B</a></li>
 <li><a href="#">C</a></li>
</ul>

Vertical

La liste de navigation existe verticalement en ajoutant .nav-stacked.

Apparence
Bonne utilisation

Point de conformité :

Mauvaise utilisation

Point de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<ul class="nav nav-pills nav-stacked">
 ...
</ul>

Désactivé

Stylisez un élément de liste de navigation comme désactivé en ajoutant .disabled.

Apparence
Bonne utilisation

Point de conformité :

  • N'utilisez pas cette fonction
    • Il est hérité de Bootstrap mais son but n'est pas compatible avec la BOEW
    • Utilisez d'autres options, comme Interface à onglets, Regroupement de liste ou Pagination pour un usage navigationel
    • Cette classe ne changera que l'apparence du <a>, et non sa fonctionnalité
Mauvaise utilisation

Point de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<ul class="nav nav-pills">
<li class="disabled">...</li>
 ...
</ul>

Justifié

Une liste de navigation existe horizontalement sur toute la colonne de la grille en utilisant .nav-justify.

Apparence
Bonne utilisation

Point de conformité :

Mauvaise utilisation

Point de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<ul class="nav nav-pills nav-justified">
 ...
</ul>

Une partie du code et des documents pour cette page provient de Bootstrap (lien externe)

Date de modification :