Bootstrap - Panneaux

Ce chapitre traite des panneaux Bootstrap. Les composants du panneau sont utilisés lorsque vous souhaitez mettre votre composant DOM dans une boîte. Pour obtenir un panneau de base, ajoutez simplement une classe.panelà l'élément <div>. Ajouter également une classe.panel-default à cet élément comme indiqué dans l'exemple suivant -

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panneau avec en-tête

Il existe deux façons d'ajouter un en-tête de panneau -

Utilisation .panel-heading classe pour ajouter facilement un conteneur d'en-tête à votre panneau.
Utilisez n'importe quel <h1> - <h6> avec un .panel-title classe pour ajouter un en-tête pré-stylisé.

L'exemple suivant montre les deux façons -

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Panel With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Panneau avec pied de page

Vous pouvez ajouter des pieds de page aux panneaux, en enveloppant des boutons ou du texte secondaire dans une classe contenant <div> .panel-footer. L'exemple suivant illustre cela.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

Les pieds de page de panneau n'héritent pas des couleurs et des bordures lors de l'utilisation de variations contextuelles car ils ne sont pas censés être au premier plan.

Alternatives contextuelles du panneau

Utilisez des classes d'état contextuelles telles que, panel-primary, panel-success, panel-info, panel-warning, panel-danger, pour rendre un panel plus significatif dans un contexte particulier.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panneau avec tables

Pour obtenir une table non bordée dans un panneau, utilisez la classe .tabledans le panneau. Supposons qu'il y ait un <div> contenant.panel-body, nous ajoutons une bordure supplémentaire en haut du tableau pour la séparation. S'il n'y a pas de <div> contenant.panel-body, puis le composant passe de l'en-tête du panneau au tableau sans interruption.

L'exemple suivant illustre ceci -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Panneau avec groupes de listes

Vous pouvez inclure des groupes de listes dans n'importe quel panneau. Créer un panneau en ajoutant une classe.panelà l'élément <div>. Ajouter également une classe.panel-defaultà cet élément. Maintenant, dans ce panneau, incluez vos groupes de listes. Vous pouvez apprendre à créer un groupe de listes à partir du chapitre Groupes de listes .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>