Sommaire

Les fenêtres d’alerte

1. Les fenêtres classiques

Vous pouvez mettre en évidence des messages ayant une mise en forme particulière : une zone encadrée avec un fond coloré.

Pour ce faire, il suffit d’utiliser comme conteneur une boîte <div> avec la classe .callout.

Dans cette boîte <div> vous y insérez tous les contenus que vous souhaitez.

Pour la couleur de fond, utilisez les classes dédiées :

  • .secondary : gris,

  • .primary : bleu,

  • .success : vert,

  • .warning : orange,

  • .alert : rouge.

Toutes ces couleurs sont claires, pastels.

Voici un exemple :

<div class="callout secondary"> 
  <h3>A lire !</h3> 
  <p>Cum sociis natoque penatibus...</p> 
</div>

Voici son affichage :

images/C10-005.png

2. La taille des fenêtres

Vous pouvez déterminer la taille des fenêtres en utilisant les classes : .small et .large, dans la boîte conteneur <div>.

<div class="callout large"> 
  <h3>A lire !</h3> 
  <p>Cum sociis natoque penatibus...</p> 
</div>

Voilà le rendu avec la classe .large :

images/C10-006.png

Les deux classes utilisent des remplissages internes différents :

.callout.small { 
  padding-top: 0.5rem; 
  padding-right: 0.5rem; 
  padding-bottom: 0.5rem; 
  padding-left: 0.5rem; } 
.callout.large { 
  padding-top: 3rem; 
  padding-right: 3rem; 
  padding-bottom: 3rem; 
  padding-left: ...