Sommaire

Les panneaux COMPOSANTS WEB:Panneaux

1. L’objectif

Les panneaux permettent d’afficher une information qui doit ressortir dans le flux rédactionnel de vos pages. Bootstrap nous propose toute une série de mises en forme diverses et variées.

Nous utilisons à nouveau deux boîtes <div> avec les classes .container et .row.

Vous pouvez consulter le fichier Bootstrap-04-COMP-Web/05_panels.html pour visualiser cet exemple.

2. Les panneaux

Tous les panneaux sont placés dans des boîtes <div> utilisant la classe .panel.

Voici les sélecteurs CSS utilisés pour la mise en forme commune : une ombre portée, des coins arrondis et une bordure.

.panel { 
   (-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);) 
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) 
} 
.panel { 
   margin-bottom: 20px; 
   background-color: #fff; 
   border: 1px solid transparent; 
   border-radius: 4px; 
   (-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);) 
   (box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)) 
}

3. Un panneau simple

Voici la structure pour utiliser un panneau contenant un simple paragraphe. La boîte du panneau utilise les classes .panel et .panel-default. Le contenu de la boîte est placé dans un élément <div class="panel-body">.

Le code :

<div class="panel panel-default"> 
   <div class="panel-body"> 
         <p>Nullam ...