Panneaux

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Les utiliser pour créer un groupement visuel de contenu. Les panneaux ont des options de couleur par thème, en plus d'offrir un en-tête et un pied de page distincts.

Conception et codage

Utilisation de base

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.

Apparence

Contenu rempli :

Contenu

Contenu à pleine chasse :

Texte de la légende
En-tête de tableau	En-tête de tableau
Données de tableau	Données de tableau
Données de tableau	Données de tableau

Contenu rempli et à pleine chasse :

Contenu

Texte de la légende
En-tête de tableau	En-tête de tableau
Données de tableau	Données de tableau
Données de tableau	Données de tableau

Ajouter un en-tête et/ou un pied de page :

Titre du panneau

Contenu

Bonne utilisation

Points de conformité :

L'utiliser pour attirer l'attention sur un segment particulier présentant au contenu digne de mention
- CSS requis : .panel
- CSS facultatif : .panel-heading, .panel-title, .panel-body et .panel-footer
Assurez-vous que l'en-tête <h*> est utilisé à l'intérieur de .panel-heading
Utilisez .panel pour le contenu à pleine chasse et pour le contenu qui est rempli de la bordure avec .panel-body
Incluez l'élément <caption> lorsque l'élément <table> ne relève pas directement d'une balise <h*>.
Utilisez .wb-inv lorsqu'il faut rendre la légende invisible
- Cela garantit l'accessibilité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

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

//Contenu à pleine chasse, légende invisible :
<div class="panel panel-default">
  <table class="table">
  <caption class="wb-inv">Texte de la légende</caption>
   ...
  </table>
</div>

//Contenu rempli et à pleine chasse :
<div class="panel panel-default">
  <div class="panel-body">
   <p>...</p>
  </div>
  <table class="table">
   ...
  </table>
</div>

//Ajouter un en-tête et/ou un pied de page :
<div class="panel panel-default">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
  <footer class="panel-footer">...</footer>
</div>

Default panel

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

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-heading, .panel-title et .panel-body pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-default">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</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.

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-primary pour mettre en évidence des renseignements généraux ou des actions générales dans une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-primary">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Panneau de succès

L'utiliser pour mettre en évidence des renseignements corrects ou des actions correctes à l'intérieur d'une boîte autonome.

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-success pour mettre en évidence des renseignements corrects ou des actions correctes à l'intérieur d'une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-success">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Panneau d'information

L'utiliser pour mettre en évidence des renseignements spécialisés ou des actions spécialisées à l'intérieur d'une boîte autonome.

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-info pour mettre en évidence des renseignements spécialisés ou des actions spécialisées à l'intérieur d'une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-info">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Panneau d'avertissement

L'utiliser pour mettre en évidence des renseignements ou des actions d'avertissement à l'intérieur d'une boîte autonome.

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-warning pour mettre en évidence des renseignements ou des actions d'avertissement à l'intérieur d'une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-warning">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Panneau de danger

L'utiliser pour mettre en évidence des renseignements dangereux ou des actions dangereuses à l'intérieur d'une boîte autonome.

Apparence

Titre du panneau

Contenu du panneau

Bonne utilisation

Points de conformité :

Utilisez .panel-danger pour mettre en évidence des renseignements dangereux ou des actions dangereuses à l'intérieur d'une boîte autonome
Assurez-vous que tous les points de conformité sont respectés dans les options d'énumération par ordre de priorité

Mauvaise utilisation

Point d'observation :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<section class="panel panel-danger">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Utilisation améliorée

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)

Date de modification:: 2019-04-11