Panel è un componente generico per racchiudere in un pannello contenuti testuali e media. Gli esempi e gli snippet di codice di questa reference sono racchiusi in pannelli.
Per creare un pannello basta aggiungere la classe .panel ad un generico div. Si possono poi le classi .panel-default, .panel-primary, .panel-success, .panel-warning, .panel-danger o .panel-info per variare l'aspetto cromatico nel colore del bordo e dell'eventuale intestazione.
<div class="panel panel-default"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p> </div> <div class="panel panel-success"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p> </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
A partire dalla struttura di base, si può arricchire un panello generico suddividendolo in sezioni: un'intestazione con titolo, un corpo centrale e un footer. Non è necessario inserire tutte e tre le parti per comporre la struttura.
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Titolo</h3> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="panel-footer">Footer</div> </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I pannelli possono essere facilmente combinati con le tabelle e associati ai list groups.