Derniers tutoriels de développement web
 

Bootstrap Panels


Panneaux

Un panneau en bootstrap est une boîte bordée de certains types de remplissage autour de son contenu:

Un panneau de base

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

Titre du panneau
Contenu 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

Contenu du panneau

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

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »