Panneaux d'amorçage
Panneaux
Un panneau en bootstrap est une boîte bordée avec un peu de rembourrage autour de son contenu :
Les panneaux sont créés avec la .panelclasse, et le contenu à l'intérieur du panneau a une
.panel-bodyclasse :
Exemple
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
La .panel-defaultclasse est utilisée pour styliser la couleur du panneau. Voir le dernier exemple sur cette page pour des classes plus contextuelles.
Titre du panneau
La .panel-headingclasse ajoute un titre au panneau :
Exemple
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Pied de page du panneau
La .panel-footerclasse ajoute un pied de page au panneau :
Exemple
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Groupe de panneaux
Pour regrouper plusieurs panneaux ensemble, enveloppez-les d'une <div>classe with
.panel-group.
La .panel-groupclasse efface la marge inférieure de chaque panneau :
Exemple
<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>
Panneaux avec classes contextuelles
Pour colorer le panneau, utilisez les classes contextuelles ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, ou .panel-danger) :