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>