Créer des panneaux Bootstrap 3

Un panneau est un outil fournis par Bootstrap 3, utilisé pour représenter l’information à l’intérieur d’une boite. Cette dernière pourra être enrichie d’un en-tête et d’un pied.

Créer un simple panneau Bootstrap 3

Pour créer un panneau Bootstrap 3, il suffit de créer une section <div> de classe .panel. À l’intérieur de cette section, nous allons d’abord créer un en-tête grâce à la classe .panel-heading. Ensuite nous mettrons en forme le corps du panneau par le biais de .panel-body.

Explication

<div class="panel panel-default"> : la classe .panel sert à déclarer un panneau Bootstrap 3. Alors que la classe .panel-default permet de définir les couleurs d’arrière-plan de l’en-tête et du pied du panneau ainsi que celle de ses bordures.

<div class="panel-heading">En-tête du panneau</div> : Création de l’en-tête du panneau à l’aide de la classe .panel-heading.

<div class="panel-body"> ... </div> : Le corps du panneau est construit par une section <div> de classe .panel-body. Nous pouvons y insérer tout contenu HTML (tableaux, paragraphes,…etc).

<div class="panel-footer">Pied du panneau</div> : la construction d’un pied de panneau à l’aide section <div> de classe .panel-footer.

panneau-bootstrap3

 

Laisser un commentaire