Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Liste groupé

Cette page nécessite une traduction.

Basic use: Default

No links:

With links:

Link text Link text (active item) Link text

Code

<p>No links:</p>
	<ul class="list-group">
		<li class="list-group-item">Text</li>
		<li class="list-group-item">Text</li>
	</ul>
	<p>With links:</p>
	<div class="list-group">
		<a href="#" class="list-group-item">Link text</a>
		<a href="#" class="list-group-item active">Link text (active item)</a>
		<a href="#" class="list-group-item">Link text</a>
	</div>

Enhanced use

Colours

No links:

With links:

Link text Link text Link text Link text
Link text (active item) Link text (active item) Link text (active item) Link text (active item)

Code

<p>No links:</p>
	<ul class="list-group">
		<li class="list-group-item list-group-item-success">Text</li>
		<li class="list-group-item list-group-item-info">Text</li>
		<li class="list-group-item list-group-item-warning">Text</li>
		<li class="list-group-item list-group-item-danger">Text</li>
	</ul>
	<p>With links:</p>
	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-success">Link text</a>
		<a href="#" class="list-group-item list-group-item-info">Link text</a>
		<a href="#" class="list-group-item list-group-item-warning">Link text</a>
		<a href="#" class="list-group-item list-group-item-danger">Link text</a>
	</div>
	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a>
		<a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a>
		<a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a>
		<a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a>
	</div>

Badges

No links:

  • 14 Text
  • 2 Text

With links:

14 Link text 2 Link text (active item) 5 Link text

Code

<div class="panel-body">
		<p>No links:</p>
		<ul class="list-group">
			<li class="list-group-item"><span class="badge">14</span> Text</li>
			<li class="list-group-item"><span class="badge">2</span> Text</li>
		</ul>
		<p>With links:</p>
		<div class="list-group">
			<a href="#" class="list-group-item"><span class="badge">14</span> Link text</a>
			<a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a>
			<a href="#" class="list-group-item"><span class="badge">5</span> Link text</a>
		</div>
	</div>

Complex content

The following content are not compliant to accessibility and they are there only for example purpose. Skip this non-accessible content section.

No links:

With links:

Heading

Content

Heading

Content

Heading

Content

Code

<p>No links:</p>
	<ul class="list-group">
		<li class="list-group-item">
			<h3 class="list-group-item-heading">Heading</h3>
			<p class="list-group-item-text">Content</p>
		</li>
		<li class="list-group-item">
			<h3 class="list-group-item-heading">Heading</h3>
			<p class="list-group-item-text">Content</p>
		</li>
	</ul>
	<p>With links:</p>
	<div class="list-group">
		<a href="#" class="list-group-item">
			<h3 class="list-group-item-heading">Heading</h3>
			<p class="list-group-item-text">Content</p>
		</a>
		<a href="#" class="list-group-item active">
			<h3 class="list-group-item-heading">Heading</h3>
			<p class="list-group-item-text">Content</p>
		</a>
		<a href="#" class="list-group-item">
			<h3 class="list-group-item-heading">Heading</h3>
			<p class="list-group-item-text">Content</p>
		</a>
	</div>

Détails de la page

Date de modification :