Latest web development tutorials

panneau Bootstrap

Ce chapitre, nous allons discuter de panneaux Bootstrap, assemblage de panneaux pour l'insertion dans un composant DOM.

Vous avez juste besoin d'obtenir le panneau de base et ajouter.Panneau classe .Panneau par défautà l'élément <div>.

Il est montré ci-dessous: 

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

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

paneldeafult_demo

Panel title

Nous sommes deux grandes façons d'ajouter un titre du panneau:

  • Utilisez.Panneau-tête de classe peut simplement ajouter un titre à votre panneau de conteneur
  • Utilisez <h1> - <h6> éléments et utilise.Panneau-titre de votre classe pour ajouter un en- tête pré-style.

Les exemples suivants illustrent deux approches différentes: 

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

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

panelheading_demo

Panel note

Vous pouvez ajouter des notes dans le panneau, il vous suffit d'ajouter.Panneau-footer dans le <div>.Des exemples sont les suivants: 

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

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

panelfooter_demo

Notez que le panneau ne sera pas hériter la couleur de la note avec solution de rechange valable, car il est pas en face du contenu.

panneau avec la couleur d'avertissement

Vous pouvez utiliser le panneau primaire, panneau succès, panneau d'information, panneau d'avertissement, des classes panneau danger créé un panel avec des couleurs d'avertissement. Des exemples sont les suivants: 

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

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

panelstyles_demo

Avec un panneau de table

Nous pouvons utiliser la classe .table dans le panneau pour définir la table sans frontières. Vous pouvez définir le contenu du texte du total des tables à l'extérieur par classe .Panneau-corps. Des exemples sont les suivants: 

<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">
      <th>Product</th><th>Price </th>
      <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">
      <th>Product</th><th>Price </th>
      <tr><td>Product A</td><td>200</td></tr>
      <tr><td>Product B</td><td>400</td></tr>
   </table>
</div>

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

paneltable_demo

Avec une liste de groupes de panneau

Nous pouvons être inclus dans une liste du groupe de panneaux en ajoutant.Panneau et classe .Panneau par défautdans le <div> pour créer le panneau, et ajouter la liste dans le panneau, les exemples sont les suivants: 

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

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

panellistgroups_demo