Bootstrap - Painéis

Este capítulo discutirá sobre os painéis do Bootstrap. Os componentes do painel são usados quando você deseja colocar seu componente DOM em uma caixa. Para obter um painel básico, basta adicionar classe.panelpara o elemento <div>. Também adicionar classe.panel-default a este elemento, conforme mostrado no exemplo a seguir -

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

Painel com Título

Existem duas maneiras de adicionar o cabeçalho do painel -

Usar .panel-heading classe para adicionar facilmente um contêiner de título ao painel.
Use qualquer <h1> - <h6> com um .panel-title classe para adicionar um título pré-estilizado.

O exemplo a seguir demonstra as duas maneiras -

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

Painel com rodapé

Você pode adicionar rodapés aos painéis, envolvendo botões ou texto secundário em uma classe contendo <div> .panel-footer. O exemplo a seguir demonstra isso.

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

Os rodapés do painel não herdam cores e bordas ao usar variações contextuais, pois eles não devem estar em primeiro plano.

Alternativas contextuais do painel

Use classes de estado contextual como, panel-primary, panel-success, panel-info, panel-warning, panel-danger, para tornar um painel mais significativo para um determinado contexto.

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

Painel com Tabelas

Para obter uma tabela sem borda dentro de um painel, use a classe .tabledentro do painel. Suponha que haja um <div> contendo.panel-body, adicionamos uma borda extra no topo da tabela para separação. Se não houver <div> contendo.panel-body, o componente se move do cabeçalho do painel para a tabela sem interrupção.

O exemplo a seguir demonstra isso -

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

Painel com grupos de lista

Você pode incluir grupos de listas em qualquer painel. Crie um painel adicionando classe.panelpara o elemento <div>. Também adicionar classe.panel-defaulta este elemento. Agora, dentro deste painel, inclua seus grupos de lista. Você pode aprender a criar um grupo de listas no capítulo Grupos de listas .

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