Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Style de liste personnalisé à l'aide de l'élément div parent

Pour répondre aux exigences des produits de service Web gérés, concernant les listes, les classes CSS doivent être appliquées à l'élément parent.

Listes non stylisées

Balisage personnalisé

  • É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 non stylisée :

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

Code

// Liste non stylisée :
<div class="list-unstyled">
	<ul>
		<li>...</li>
	</ul>
</div>
// Liste imbriquée non stylisée :
<ul>
	<li>Élément de liste 1
		<div class="lst-none">
			<ul>
				<li>Élément de liste 1a</li>
				<li>Élément de liste 1b</li>
			</ul>
		</div>
	</li>
</ul>

Balisage par défaut - Recommandé

  • É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 non stylisée :

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

Code

// Liste non stylisée :
<ul class="list-unstyled">
	<li>...</li>
</ul>
// Liste imbriquée non stylisée :
<ul>
	<li>Élément de liste 1
		<ul class="lst-none">
			<li>Élément de liste 1a</li>
			<li>Élément de liste 1b</li>
		</ul>
	</li>
</ul>

Listes alphabétiques − Lettre minuscule

Balisage personnalisé

  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

Code

<ol>
	<li>...
		<div class="lst-lwr-alph">
			<ol>
				<li>...</li>
			</ol>
		</div>
	</li>
	<li>...</li>
</ol>

Balisage par défaut - Recommandé

  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

Code

<ol>
	<li>...
		<ol class="lst-lwr-alph">
			<li>...</li>
		</ol>
	</li>
	<li>...</li>
</ol>

Listes alphabétiques − Lettre majuscule

Balisage personnalisé

  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

Code

<div class="lst-upr-alph">
	<ol>
		<li>...</li>
		<li>
			<ol>
				<li>...</li>
			</ol>
		</li>
		<li>...</li>
	</ol>
<div>

Balisage par défaut - Recommandé

  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

Code

<ol class="lst-upr-alph">
	<li>...</li>
	<li>
		<ol>
			<li>...</li>
		</ol>
	</li>
	<li>...</li>
</ol>

Liste en ligne

Balisage personnalisé

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

Code

<div class="list-inline">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
</div>

Balisage par défaut - Recommandé

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

Code

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

Liste avec espacement - espaces ajoutés

Balisage personnalisé

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

Code

// Liste avec espacement :
<div class="lst-spcd">
	<ul>
		<li>Élément de liste 1</li>
		<li>Élément de liste 2</li>
		<li>Élément de liste 3</li>
	</ul>
</div>
<div class="lst-spcd">
	<ol>
		<li>Élément de liste 1</li>
		<li>Élément de liste 2</li>
		<li>Élément de liste 3</li>
	</ol>
</div>

Balisage par défaut - Recommandé

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

Code

// Liste avec espacement :
<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>
<ol class="lst-spcd">
	<li>Élément de liste 1</li>
	<li>Élément de liste 2</li>
	<li>Élément de liste 3</li>
</ol>

Liste doublement espacée .lst-spcd-2

Balisage personnalisé

  • Élément
  • Élément
  • Élément
  • Élément
  • Élément
  1. Élément
  2. Élément
  3. Élément
  4. Élément
  5. Élément

Code

<div class="lst-spcd-2">
	<ul>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
	</ul>
</div>
<div class="lst-spcd-2">
	<ol>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
		<li>Élément</li>
	</ol>
</div>

Balisage par défaut - Recommandé

  • Élément
  • Élément
  • Élément
  • Élément
  • Élément
  1. Élément
  2. Élément
  3. Élément
  4. Élément
  5. Élément

Code

<ul class="lst-spcd-2">
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
</ul>
<ol class="lst-spcd-2">
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
	<li>Élément</li>
</ol>

Style de puce personnalisé pour liste non ordonnée

Disque stylé par son conteneur parent

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

Code

<ul class="lst-none">
	<li>...
		<div class="list-advanced disc">
			<ul>
				<li>...
					<ul>
						<li>...</li>
						<li>...</li>
						<li>...</li>
					</ul>
				</li>
				<li>...</li>
				<li>...</li>
			</ul>
		<div>
	</li>
</ul>

Disque - Recommandé

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

Code

<ul class="lst-none">
	<li>...
		<ul class="disc">
			<li>...
				<ul>
					<li>...</li>
					<li>...</li>
					<li>...</li>
				</ul>
			</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li>...</li>
	<li>...</li>
	</li>
</ul>

Style de cercle par son conteneur parent

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

Code

<div class="list-advanced circle">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
<div>

Cercle - Recommandé

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

Code

<ul class="circle">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Style de carré par son conteneur parent

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

Code

<div class="list-advanced square">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
<div>

Carré - Recommandé

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

Code

<ul class="square">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Détails de la page

Date de modification :