Sélection de la langue

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

Pied de page du panneau
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: