Listes
Listes non ordonnées
- Item 1
- Item 2
- Item 3
Code
<ul>
<li>...</li>
</ul>
Listes ordonnées
- Item 1
- Item 2
- Item 3
Code
<ol>
<li>...</li>
</ol>Listes de définitions
- Terme 1
- Définition du terme 1
- Terme 2
- Définition du terme 2
// Liste de données
<dl>
// Terme de données:
<dt>...</dt>
// Définition de données
<dd>...</dd>
</dl>Listes non stylées
Liste non stylée:
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 3
Listes imbriquées non stylées:
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 3
Code
//Liste non stylée:
<ul class="list-unstyled">
<li>...</li>
</ul>
//Liste imbriquée non stylée:
<ul>
<li>Item 1
<ul class="lst-none">
<li>Item 1a</li>
<li>Item 1b</li>
</ul>
</li>
</ul>Listes numérotées
- Item 1
-
Item 2
- Item 2a
- Item 2b
- Item 3
Code
<ol>
<li>...
<ol class="lst-num">
<li>...</li>
</ol>
</li>
<li>...</li>
</ol>Listes alphabétiques − minuscules
- Item 1
-
Item 2
- Item 2a
- Item 2b
- Item 3
Code
<ol>
<li>...
<ol class="lst-lwr-alph">
<li>...</li>
</ol>
</li>
<li>...</li>
</ol>Listes alphabétiques − majuscules
- Item 1
-
Item 2
- Item 2a
- Item 2b
- Item 3
Code
<ol class="lst-upr-alph">
<li>...</li>
</ol>Chiffres romains − minuscules
- Item 1
-
Item 2
- Item 2a
- Item 2b
- Item 3
Code
<ol>
<li>...
<ol class="lst-lwr-rmn">
<li>...</li>
</ol>
</li>
<li>...</li>
</ol>Chiffres romains − majuscules
- Item 1
-
Item 2
- Item 2a
- Item 2b
- Item 3
Code
<ol class="lst-upr-rmn">
<li>...</li>
</ol>Liste en ligne
- Item 1
- Item 2
- Item 3
Code
<ol class="list-inline">
<li>...</li>
</ol>Listes avec espacement ajouté
- Item 1
- Item 2
- Item 3
Code
// Liste éspacée:
<ul class="lst-spcd">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Listes de définitions – disposition horizontale
- 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
Code
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
//Sans bordure
<dl class="dl-horizontal brdr-0">
<dt>...</dt>
<dd>...</dd>
</dl>Listes en colonnes
.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
Disposition – deux colonnes
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
code
<ul class="colcount-sm-2">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>Disposition – trois colonnes
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
code
<ul class="colcount-sm-3">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>Disposition – quatre colonnes
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
<ul class="colcount-sm-4">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>Disposition − Multi-classes
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>.colcount-no-break
Empêche les éléments de liste de se séparer à travers plusieurs colonnes de liste.
Liste sans ordre
Exemple pratique
- Item 1
Ligne 2
Ligne 3 - Item 2
Ligne 2
Ligne 3 - Item 3
- Item 4
Ligne 2
Ligne 3 - Item 5
Ligne 2
Ligne 3 - Item 6
Ligne 2 - Item 7
Ligne 2 - Item 8
code
<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
<li>Item 1<br>Ligne 2<br>Ligne 3</li>
<li>Item 2<br>Ligne 2<br>Ligne 3</li>
<li>Item 3</li>
<li>Item 4<br>Ligne 2<br>Ligne 3</li>
<li>Item 5<br>Ligne 2<br>Ligne 3</li>
<li>Item 6<br>Ligne 2</li>
<li>Item 7<br>Ligne 2</li>
<li>Item 8</li>
</ul>Liste de descriptions
Exemple pratique
- Terme 1
- Description
- Terme 2
- Description
Ligne 2
Ligne 3 - Terme 3
- Description
Ligne 2
Ligne 3 - Terme 4
- Description
Ligne 2 - Terme 5
- Description
Ligne 2 - Terme 6
- Description
code
<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
<div>
<dt>Terme 1</dt>
<dd>Description</dd>
</div>
<div>
<dt>Terme 2</dt>
<dd>Description<br>Ligne 2<br>Ligne 3</dd>
</div>
<div>
<dt>Terme 3</dt>
<dd>Description<br>Ligne 2<br>Ligne 3</dd>
</div>
<div>
<dt>Terme 4</dt>
<dd>Description<br>Ligne 2</dd>
</div>
<div>
<dt>Terme 5</dt>
<dd>Description<br>Ligne 2</dd>
</div>
<div>
<dt>Terme 6</dt>
<dd>Description</dd>
</div>
</dl>Liste responsive.list-responsive
- Item
- Item
- Item
- Item
- Item
code
<ul class="list-responsive">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>
Liste - Styles additionnels - GCWeb thème V5
Liste double interligne .lst-spcd-2
- Item
- Item
- Item
- Item
- Item
code
<ul class="lst-spcd-2">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>Listes en colonnes .list-col-[breakpoint]-[colonnes]
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
code
<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3 list-col-lg-4">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>
Liste descriptive en ligne
Liste descriptive en ligne utilisée pour afficher des termes et descriptions courts.
- Terme :
- Description courte
- Terme :
- Description courte
- Terme :
- Description courte
- Terme :
- Description courte
- Terme :
- Description courte
<dl class="dl-inline">
<dt>Terme :</dt>
<dd>Description courte</dd>
<dt>Terme :</dt>
<dd>Description courte</dd>
<dt>Terme :</dt>
<dd>Description courte</dd>
<dt>Terme :</dt>
<dd>Description courte</dd>
<dt>Terme :</dt>
<dd>Description courte</dd>
</dl>Liste avec classe utilitaire compact
Liste compacte utilisée principalement pour des liens navigables sur des pages de navigation.
Détails de la page
- Date de modification :