painéis
Um painel na inicialização é uma caixa limitada com algum estofamento em torno do seu conteúdo:
Os painéis são criados com o .panel classe e conteúdo dentro do painel tem uma .panel-body de classe:
Exemplo
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
Tente você mesmo " O .panel-default classe é usada para denominar a cor do painel. Veja o último exemplo desta página para as classes mais contextuais.
A posição do painel
O .panel-heading classe adiciona um título para o painel:
Exemplo
<div class="panel panel-default">
<div
class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel
Content</div>
</div>
Tente você mesmo " painel de Rodapé
O .panel-footer classe adiciona um rodapé para o painel:
Exemplo
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Tente você mesmo " Grupo painel
Para agrupar vários painéis juntos, enrole uma <div> com a classe .panel-group ao seu redor.
O .panel-group class 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>
Tente você mesmo " Painéis com Classes contextuais
Para colorir o painel, usar classes contextuais ( .panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning , ou .panel-danger ):
Exemplo
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »