Panneaux

Options d'énumération par ordre de priorité

Les utiliser pour créer divers types de conteneurs. Un panneau décomposé comprend les éléments suivants : .panel, .panel-heading, .panel-title, panel-body et .panel-footer. Les éléments .panel, .panel-heading et .panel-title sont requis; tous les autres éléments du panneau sont facultatifs.

Code

Contenu rempli :

<div class="panel panel-default">
		<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
		</header>
	<div class="panel-body">
		<p>Contenu</p>
	</div>
</div>

Contenu à pleine chasse :

<div class="panel panel-default">
		<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
		</header>
	<table class="table">
		<caption class="wb-inv">Texte de la légende</caption>
		<thead>
			<tr>
				<th>En-tête de tableau</th>
				<th>En-tête de tableau</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Données de tableau</td>
				<td>Données de tableau</td>
			</tr>
			<tr>
				<td>Données de tableau</td>
				<td>Données de tableau</td>
			</tr>
		</tbody>
	</table>
</div>

Contenu rempli et à pleine chasse :

<div class="panel panel-default">
		<header class="panel-heading">
			<h3 class="panel-title">Titre du panneau</h3>
		</header>
		<div class="panel-body">
			<p>Contenu</p>
		</div>
		<table class="table">
			<caption class="wb-inv">Texte de la légende</caption>
			<thead>
			<tr>
				<th>En-tête de tableau</th>
				<th>En-tête de tableau</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Données de tableau</td>
				<td>Données de tableau</td>
			</tr>
			<tr>
				<td>Données de tableau</td>
				<td>Données de tableau</td>
			</tr>
		</tbody>
	</table>
</div>

Ajouter un pied de page :

<div class="panel panel-default">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Contenu</p>
	</div>
	<footer class="panel-footer">Pied de page du panneau</footer>
</div>

Apparences des panneaux

Panneau par défaut

L'utiliser pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome.

Titre du panneau

Panel Contenu

Panneau primaire

L'utiliser pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome.

Titre du panneau

Panel Contenu

Panneau sur la réussite

À utiliser pour mettre en évidence des informations ou des actions correctes dans un encadré autonome.

Titre du panneau

Panel Contenu

Panneau d'information

À utiliser pour mettre en évidence des informations ou des actions spécialisées dans un encadré autonome.

Titre du panneau

Panel Contenu

Panneau d'avertissement

À utiliser pour mettre en évidence des informations ou des actions d'avertissement dans un encadré autonome.

Titre du panneau

Panel Contenu

Panneau de danger

À utiliser pour mettre en évidence des informations ou des actions dangereuses dans un encadré autonome.

Titre du panneau

Panel Contenu

Source code

Panneau par défaut

L'utiliser pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome.

<section class="panel panel-default mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Panneau primaire

L'utiliser pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome.

<section class="panel panel-primary mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Panneau sur la réussite

À utiliser pour mettre en évidence des informations ou des actions correctes dans un encadré autonome.

<section class="panel panel-success mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Panneau d'information

À utiliser pour mettre en évidence des informations ou des actions spécialisées dans un encadré autonome.

<section class="panel panel-info mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Panneau d'avertissement

À utiliser pour mettre en évidence des informations ou des actions d'avertissement dans un encadré autonome.

<section class="panel panel-warning mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Panneau de danger

À utiliser pour mettre en évidence des informations ou des actions dangereuses dans un encadré autonome.

<section class="panel panel-danger mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Titre du panneau</h3>
	</header>
	<div class="panel-body">
		<p>Panel Contenu</p>
	</div>
</section>

Reference

Guide de style de la Boîte à outils de l'expérience Web - - Panels