Painéis de inicialização
Painéis
Um painel em bootstrap é uma caixa com bordas com algum preenchimento em torno de seu conteúdo:
Um painel básico
Os painéis são criados com a .panelclasse e o conteúdo dentro do painel tem uma
.panel-bodyclasse:
Exemplo
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
A .panel-defaultclasse é usada para estilizar a cor do painel. Veja o último exemplo nesta página para classes mais contextuais.
Cabeçalho do Painel
Cabeçalho do Painel
Conteúdo do painel
A .panel-headingclasse adiciona um título ao painel:
Exemplo
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Rodapé do painel
Conteúdo do painel
A .panel-footerclasse adiciona um rodapé ao painel:
Exemplo
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Grupo de painéis
Para agrupar muitos painéis, envolva- <div>os com uma classe
.panel-group.
A .panel-groupclasse limpa a margem inferior de cada painel:
Exemplo
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
Painéis com classes contextuais
Para colorir o painel, use classes contextuais ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningou .panel-danger):
Exemplo
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content