pannelli
Un pannello in bootstrap è una scatola delimitato con qualche chilo in giro per il suo contenuto:
I pannelli sono creati con la .panel classe e contenuti all'interno del pannello ha un .panel-body classe:
Esempio
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
Prova tu stesso " Il .panel-default classe viene utilizzata per lo stile il colore del pannello. Vedere l'ultimo esempio in questa pagina per le classi più contestuali.
Intestazione Panel
Il .panel-heading di classe aggiunge un titolo al pannello:
Esempio
<div class="panel panel-default">
<div
class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel
Content</div>
</div>
Prova tu stesso " Panel Footer
Il .panel-footer classe 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>
Prova tu stesso " Gruppo Panel
Per gruppi numerosi pannelli tra loro, avvolgere un <div> con classe .panel-group intorno a loro.
Il .panel-group di classe cancella il fondo-margine 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>
Prova tu stesso " Pannelli con classi contestuali
Per colorare il pannello, utilizzare le classi contestuali ( .panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning , o .panel-danger ):
Esempio
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »