Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Listes

Cette page nécessite une traduction.

Unordered lists

Code

<ul>
		<li>...</li>
		</ul>

Ordered lists

  1. List item 1
  2. List item 2
  3. List item 3

Code

<ol>
	<li>...</li>
	</ol>

Definition lists

Term 1
Definition of term 1
Term 2
Definition of term 2
// Data list
	<dl>

	// Data term:
	<dt>...</dt>

	// Data definition:
	<dd>...</dd>
	</dl>

Unstyled lists

Unstyled list:

Unstyled nested list:

Code

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

	//Unstyled nested list:
	<ul>
		<li>List item 1
			<ul class="lst-none">
				<li>List item 1a</li>
				<li>List item 1b</li>
			</ul>
		</li>
	</ul>

Numbered lists

  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. List item 3

Code

<ol>
	<li>...
		<ol class="lst-num">
		<li>...</li>
		</ol>
	</li>
	<li>...</li>
	</ol>

Alpha lists − Lower alpha

  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. List item 3

Code

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

Alpha lists − Upper alpha

  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. List item 3

Code

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

Roman numeral − Lower Roman

  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. List item 3

Code

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

Roman numeral − Upper Roman

  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. List item 3

Code

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

List inline

Code

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

Spacing lists - spaces added

Code

// Spaced list:
	<ul class="lst-spcd">
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
	</ul>

Definition lists − horizontal layout

Term 1
Definition of term 1
Term 2
Definition of term 2

With no border

Term 1
Definition of term 1
Term 2
Definition of term 2

Code

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

List columns

Appearance − Two columns

code 

<ul class="colcount-sm-2">
	<li>Item 1</li>
	...
	<li>Item 8</li>
	</ul>

Appearance − Three columns

code 

<ul class="colcount-sm-3">
	<li>Item 1</li>
	...
	<li>Item 8</li>
	</ul>

Appearance − Four columns

<ul class="colcount-sm-4">
	<li>Item 1</li>
	...
	<li>Item 8</li>
	</ul>

Appearance − Multi-class

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
	<li>Item 1</li>
	...
	<li>Item 8</li>
	</ul>

Responsive list .list-responsive

code

<ul class="list-responsive">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	</ul>

List - Additional styles - GCWeb theme V5

List double spaced .lst-spcd-2

code

<ul class="lst-spcd-2">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	</ul>

Lists in columns .list-col-[breakpoint]-[columns]

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

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