Pannelli Bootstrap
Pannelli
Un pannello in bootstrap è una scatola bordata con del riempimento attorno al suo contenuto:
I pannelli vengono creati con la .panelclasse e il contenuto all'interno del pannello ha una
.panel-bodyclasse:
Esempio
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
La .panel-defaultclasse viene utilizzata per definire lo stile del colore del pannello. Vedi l'ultimo esempio in questa pagina per classi più contestuali.
Intestazione del pannello
La .panel-headingclasse aggiunge un'intestazione al pannello:
Esempio
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Piè di pagina del pannello
La .panel-footerclasse aggiunge un piè di pagina al pannello:
Esempio
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Gruppo di pannelli
Per raggruppare più riquadri, avvolgili attorno a una <div>con classe
.panel-group.
La .panel-groupclasse cancella il margine inferiore di ogni pannello:
Esempio
<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>
Pannelli con classi contestuali
Per colorare il pannello, utilizzare le classi contestuali ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningo .panel-danger):