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. Seul l'élément .panel est requis. Tous les autres sont facultatifs.

Code

Contenu rempli :

<div class="panel panel-default">
	<div class="panel-body">
		<p>Contenu</p>
	</div>
</div>

FContenu à pleine chasse :

<div class="panel panel-default">
	<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">
	<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>

Add a heading and/or footer:

<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

Primary panel

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

Success panel

Use to spotlight correct information/actions within a self-contained box.

Titre du panneau

Panel Contenu

Info panel

Use to spotlight specialized information/actions within a self-contained box.

Titre du panneau

Panel Contenu

Warning panel

Use to spotlight warning information/actions within a self-contained box.

Titre du panneau

Panel Contenu

Danger panel

Use to spotlight dangerous information/actions within a self-contained box.

Titre du panneau

Panel Contenu

Source code

Default panel

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>

Primary panel

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>

Success panel

Use to spotlight correct information/actions within a self-contained box.

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

Info panel

Use to spotlight specialized information/actions within a self-contained box.

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

Warning panel

Use to spotlight warning information/actions within a self-contained box.

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

Danger panel

Use to spotlight dangerous information/actions within a self-contained box.

<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