Listes

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

Les utiliser pour afficher un nombre d'éléments reliés de façon consécutive. Habituellement, les éléments d'une liste s'affichent l'un en dessous de l'autre.

Conception et codage

Utilisation de base

Listes non ordonnées

Les utiliser pour énumérer des éléments lorsque l'ordre n'importe pas explicitement.

Apparence
  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez une liste non ordonnée ( <ul>) lorsque l'ordre des éléments de la liste n'importe pas explicitement
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ul>
  <li>...</li>
</ul>

Listes ordonnées

Les utiliser pour énumérer des éléments lorsque l'ordre importe explicitement.

Apparence
  1. Élément de liste 1
  2. Élément de liste 2
  3. Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez une liste ordonnée (<ol>) lorsque l'ordre des éléments d'une liste importe explicitement
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol>
  <li>...</li>
</ol>

Listes de définitions

Les utiliser pour énumérer des termes de données avec leurs définitions associées.

Apparence
Terme 1
Définition du terme 1
Terme 2
Définition du terme 2
Bonne utilisation

Points de conformité :

  • Utilisez des listes de données (<dl>) pour les termes (<dt>) et les définitions associées (<dd>) qui les suivent
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Comprenez et mettez en œuvre les principes à l'appui connexes
  • Assurez-vous que tous les points de conformité sont respectés dans les listes de définitions – mise en page horizontale
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Liste de données
<dl>

// Terme de données :
  <dt>...</dt>

// Définition de données :
  <dd>...</dd>
</dl>

Utilisation avancée

Listes sans style

Les utiliser pour retirer les puces ou les nombres d'une liste.

Apparence

Liste sans style :

  • Élément de liste 1
  • Élément de liste 2
    • Élément de liste 2a
    • Élément de liste 2b
  • Élément de liste 3

Liste imbriquée sans style :

  • Élément de liste 1
  • Élément de liste 2
    • Élément de liste 2a
    • Élément de liste 2b
Bonne utilisation

Points de conformité :

  • Utilisez .list-unstyled pour enlever les puces ou les nombres d'une liste
  • Utilisez .lst-none pour enlever les puces ou les nombres d'une liste imbriquée
  • Ajoutez .lst-spcd pour élargir l'espace blanc entre les éléments et pour rendre ceux-ci visuellement séparés et distincts
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code

Liste sans style 

<ul class="list-unstyled">
  <li>...</li>
</ul>

Liste imbriquée sans style 

<ul>
  <li>Élément de liste 1
    <ul class="lst-none">
      <Élément de liste 1a>
      <Élément de liste 1b>
    </ul>
  </li>
</ul>

ab Listes alphabétiques – minuscules alphabétiques

On les utilise pour modifier l'attribut <ol> afin d'afficher des lettres au lieu de nombres. Cela s'applique seulement aux éléments de liste qui sont des enfants immédiats. Cela veut dire que vous devez ajouter la classe CSS pour toute liste imbriquée.

Apparence
  1. Élément de liste 1
  2. Élément de liste 2
    1. Élément de liste 2a
    2. Élément de liste 2b
  3. Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez .lst-lwr-alph pour appliquer des minuscules alphabétiques à une liste ordonnée
  • On s'en sert principalement comme liste imbriquée de deuxième niveau
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Assurez-vous que tous les points de conformité sont respectés dans les listes ordonnées
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol>
  <li>...
    <ol class="lst-lwr-alph">
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ol>

AB Listes alphabétiques – majuscules alphabétiques

Les utiliser pour modifier un élément <ol> afin d'afficher des lettres au lieu de chiffres. Cela s'applique seulement aux éléments de la liste qui sont des enfants immédiats. Cela signifie que vous devez aussi ajouter la classe CSS pour toute liste imbriquée.

Apparence
  1. Élément de liste 1
  2. Élément de liste 2
    1. Élément de liste 2a
    2. Élément de liste 2b
  3. Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez .lst-upr-alph pour appliquer des majuscules alphabétiques à une liste ordonnée
  • On les utilise principalement dans les documents juridiques
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Assurez-vous que tous les points de conformité sont respectés dans les listes ordonnées
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol class="lst-upr-alph">
  <li>...</li>
</ol>

vii Chiffres romains – minuscules romaines

On les utilise pour modifier un élément <ol> afin d'afficher des chiffres romains (I, II, III, IV ou i, ii, iii, iv…) au lieu de chiffres arabes (1, 2, 3, 4.…). Cela s'applique seulement aux éléments de la liste qui sont des enfants immédiats. Cela signifie que vous devez aussi ajouter la classe CSS pour toute liste imbriquée.

Apparence
  1. Élément de liste 1
  2. Élément de liste 2
    1. Élément de liste 2a
    2. Élément de liste 2b
  3. Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez .lst-lwr-rmn pour appliquer des chiffres romains minuscules à une liste ordonnée
  • S'en servir principalement comme une liste imbriquée de deuxième niveau
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Assurez-vous que tous les points de conformité sont respectés dans les listes ordonnées
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol>
  <li>...
    <ol class="lst-lwr-rmn">
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ol>

VII Chiffres romains − majuscules romaines

Les utiliser pour modifier un élément <ol> afin d'afficher des chiffres romains (I, II, III, IV ou i, ii, iii, iv...) au lieu de chiffres arabes (1, 2, 3, 4...). Cela s'applique seulement aux éléments de la liste qui sont des enfants immédiats. Cela veut dire que vous devez aussi ajouter la classe CSS pour toute liste imbriquée. Cela s'applique seulement aux éléments de la liste qui sont des enfants immédiats. Cela veut dire que vous devez aussi ajouter la classe CSS pour toute liste imbriquée.

Apparence
  1. Élément de liste 1
  2. Élément de liste 2
    1. Élément de liste 2a
    2. Élément de liste 2b
  3. Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez.lst-upr-rmn pour appliquer des chiffres romains majuscules à une liste ordonnée
  • On les utilise principalement dans les documents juridiques
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Assurez-vous que tous les points de conformité sont respectés dans les listes ordonnées
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol class="lst-upr-rmn">
  <li>...</li>
</ol>

List-inline

On l'utilise pour aligner horizontalement les éléments d'une liste.

Apparence
  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez .list-inline pour aligner horizontalement les éléments d'une liste
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ol class="list-inline">
  <li>...</li>
</ol>

Listes espacées

On les utilise pour ajouter un espace entre les éléments d'une liste.

Apparence

Défaut :

  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3

Espacement ajouté :

  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
Bonne utilisation

Points de conformité :

  • Utilisez .lst-spcd pour séparer les éléments d'une liste et pour élargir l'espace blanc entre eux
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Liste par défaut :
<ol>
  <li>...</li>
</ol>

// Liste espacée :
<ul class="lst-spcd">
  <li>Élément de liste 1</li>
  <li>Élément de liste 2</li>
  <li>Élément de liste 3</li>
</ul>

Listes de définitions – mise en page horizontale

On les utilise pour faire en sorte que des termes et des définitions qui se trouvent à l'intérieur d'un élément <dl> s'alignent côte à côte. La liste est tout d'abord comprimée, comme l'élément <dl> par défaut, mais, lorsque la barre de navigation est développée, ces listes en font autant.

Apparence
Terme 1
Définition du terme 1
Terme 2
Définition du terme 2
Sans bordure
Terme 1
Définition du terme 1
Terme 2
Définition du terme 2
Bonne utilisation

Points de conformité :

  • Utilisez .dl-horizontal pour aligner des définitions sur la même ligne horizontale que leur terme défini
  • Utilisez le texte semblable et les types de listes de façon uniforme dans le même document
  • Assurez-vous que tous les points de conformité sont respectés dans les listes de définitions
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

<dl class="dl-horizontal brdr-0">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Colonnes de liste

Les utiliser pour étendre la liste sur 2, 3 ou 4 colonnes avec l'attribut CSS .column-count. Puisque les colonnes sont semblables à des grilles, elles sont assujetties aux mêmes points d'arrêt que les grilles. Par conséquent, les classes disponibles sont les suivantes :

Compatibilité multinavigateur

Internet Explorer 9 et les versions inférieures ne prennent pas en charge l'attribut .column-count. Dans ces navigateurs, la liste devient linéaire, étant présentée comme une seule liste dans une seule colonne.

Apparence − deux colonnes
  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8
Code
<ul class="colcount-sm-2">
  <li>Élément 1</li>
  ...
  <li>Élément 8</li>
</ul>
Apparence − trois colonnes
  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8
<ul class="colcount-sm-3">
  <li>Élément 1</li>
  ...
  <li>Élément 8</li>
</ul>
Apparence − quatre colonnes
  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8
<ul class="colcount-sm-4">
  <li>Élément 1</li>
  ...
  <li>Élément 8</li>
</ul>
Apparence − plusieurs classes

Vous pouvez aussi appliquer plusieurs classes aux colonnes afin d'adapter celles-ci à la résolution :

  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4
  • Élément 5
  • Élément 6
  • Élément 7
  • Élément 8
<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
  <li>Élément 1</li>
  ...
  <li>Élément 8</li>
</ul>
Bonne utilisation

Points de conformité :

Mauvaise utilisation

Point d'observation :

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Principes à l'appui

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)

Date de modification :