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

Élément de liste 1
Élément de liste 2
É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

Élément de liste 1
Élément de liste 2
1. Élément de liste 2a
2. Élément de liste 2b
É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

Élément de liste 1
Élément de liste 2
1. Élément de liste 2a
2. Élément de liste 2b
É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

Élément de liste 1
Élément de liste 2
1. Élément de liste 2a
2. Élément de liste 2b
É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

Élément de liste 1
Élément de liste 2
1. Élément de liste 2a
2. Élément de liste 2b
É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 :

.colcount-xxs-2, .colcount-xs-2, .colcount-sm-2, .colcount-md-2, .colcount-lg-2, .colcount-xl-2
.colcount-xxs-3, .colcount-xs-3, .colcount-sm-3, .colcount-md-3, .colcount-lg-3, .colcount-xl-3
.colcount-xxs-4, .colcount-xs-4, .colcount-sm-4, .colcount-md-4, .colcount-lg-4, .colcount-xl-4

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é :

Appliquer à l'élément <ul> ou <ol>
Vérifiez l'espace d'affichage et appliquez plusieurs classes à la liste pour optimiser le nombre de colonnes pour chaque résolution
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

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:: 2019-04-11