Bootstrap - Ajout d'une boite (Panel) dans un texte

Écrit par Pascal Bangerter

 

Afin d'améliorer la présentation d'une partie du texte d'un article pour le mettre en évidence, il est parfois intéressant de l'isoler dans une boite.

Texte de l'entête de la boite
Texte du corps de la boite

Pour créer ces boites on peut utiliser la notion de "Panel" de Bootstrap.
Plus d'information sur la création de ces boites https://getbootstrap.com/components/#panels


Les Panel sont des "boites" divisée en trois parties : l'entête, le corps, et le bas (l'entête et le bas étant des options facultatives).

Exemples :

Texte d'entête
Texte du corps de la boite
Texte du corps de la boite

Pour créer ces boites il va falloir faire un petit peu de code HTML et pour cela il faudra passer du mode visuel de l'éditeur au mode HTML.

Dans l'éditeur cliquez sur le bouton   situé à gauche juste dessous l'éditeur.

Positionnez vous à l'endroit ou vous désirez insérer la boite et insérer le code suivant.

<div class="panel panel-default">
  <div class="panel-heading">
     Texte de l'entête de la boite
  </div>
  <div class="panel-body">
    Texte du corps de la boite
  </div>
  <div class="panel-footer">
     Texte du bas de la boite
  </div>
</div>

Le bloc d'entête

<div class="panel-heading">
   Texte de l'entête de la boite
</div>

et/ou le bloc de bas

<div class="panel-footer"> 
   Insérez ici le texte du bas de la boite
</div>

peuvent si besoin être supprimé.

Résultat Complet:

Texte de l'entête de la boite
Texte du corps de la boite

Sans l'entête

Texte du corps de la boite

Sans le bas de boite (uniquement le corps du texte)

Texte du corps de la boite

La couleur de la boite peut être modifiée en changeant la classe de la première balise <div>

Les couleurs des boites dépendent de la feuille de style lié à votre thème.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

 

Primary
Texte du corps de la boite
Success
Texte du corps de la boite
Info
Texte du corps de la boite
Warning
Texte du corps de la boite
Danger
Texte du corps de la boite
Catégorie :