Panneaux
Un panneau en bootstrap est une boîte bordée de certains types de remplissage autour de son contenu:
Les panneaux sont créés avec le .panel classe et contenu dans le panneau a une .panel-body de classe:
Exemple
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
Essayez - le vous - même » Le .panel-default classe est utilisée pour le style de la couleur du panneau. Voir le dernier exemple sur cette page pour plus de classes contextuelles.
Titre du panneau
Le .panel-heading de classe ajoute une rubrique à l'écran:
Exemple
<div class="panel panel-default">
<div
class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel
Content</div>
</div>
Essayez - le vous - même » Panneau de pied de page
Le .panel-footer classe ajoute un pied de page dans le panneau:
Exemple
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Essayez - le vous - même » Groupe Groupe
Pour regrouper plusieurs panneaux ensemble, enroulez un <div> avec la classe .panel-group autour d' eux.
Le .panel-group classe efface le bas-marge 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>
Essayez - le vous - même » Panneaux avec classes contextuelles
Pour colorer le panneau, utiliser des classes contextuelles ( .panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning d' .panel-danger .panel-warning , ou .panel-danger ):
Exemple
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »