Bootstrap - Pannelli

Questo capitolo discuterà dei pannelli Bootstrap. I componenti del pannello vengono utilizzati quando si desidera inserire il componente DOM in una scatola. Per ottenere un pannello di base, aggiungi semplicemente la classe.panelall'elemento <div>. Aggiungi anche classe.panel-default a questo elemento come mostrato nel seguente esempio:

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

Pannello con intestazione

Esistono due modi per aggiungere l'intestazione del pannello:

Uso .panel-heading class per aggiungere facilmente un contenitore di intestazioni al pannello.
Utilizza qualsiasi <h1> - <h6> con a .panel-title class per aggiungere un'intestazione con stile predefinito.

L'esempio seguente mostra entrambi i modi:

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

Pannello con piè di pagina

Puoi aggiungere piè di pagina ai pannelli, avvolgendo pulsanti o testo secondario in una classe contenente <div> .panel-footer. Il seguente esempio lo dimostra.

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

I piè di pagina del pannello non ereditano colori e bordi quando si utilizzano variazioni contestuali poiché non devono essere in primo piano.

Alternative contestuali del pannello

Usa classi di stato contestuali come, panel-primary, panel-success, panel-info, panel-warning, panel-danger, per rendere un pannello più significativo per un particolare contesto.

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

Pannello con tavoli

Per ottenere una tabella senza bordi all'interno di un pannello, usa la classe .tableall'interno del pannello. Supponiamo che ci sia un <div> contenente.panel-body, aggiungiamo un bordo extra nella parte superiore della tabella per la separazione. Se non è presente <div> contenente.panel-body, quindi il componente si sposta dall'intestazione del pannello alla tabella senza interruzioni.

Il seguente esempio lo dimostra:

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

Pannello con gruppi di elenchi

È possibile includere gruppi di elenchi in qualsiasi pannello. Crea un pannello aggiungendo una classe.panelall'elemento <div>. Aggiungi anche classe.panel-defaulta questo elemento. Ora all'interno di questo pannello includi i tuoi gruppi di elenchi. Puoi imparare a creare un gruppo di elenchi dal capitolo Gruppi di elenchi .

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