Alert

Présentation

Messages d'alerte courants : information, succès, alerte, danger/erreur. Les blocs d'alerte sont dotés d'une classe commune alert et d'une classe spécifique (ex. alert-success).

L'attribut role="alert" déclenche sa lecture immédiate au chargement de la page par les aides techniques. Pour cette raison, nous choisissons de ne pas mettre ce rôle sur les messages d'information.

Note : ce module est issu du framework Bootstrap.

Exemples d'utilisation

<div class="alert alert-success" role="alert">
  <p class="alert-content"><strong>Bravo ! </strong>Votre compte a bien été créé.</p>
</div>

<div class="alert alert-info">
  <p class="alert-content"><strong>Votre messagerie : </strong>Vous avez 123 nouveaux messages privés. <a href="#">Accédez à votre boîte de messages</a>.</p>
</div>

<div class="alert alert-warning" role="alert">
  <p class="alert-content"><strong>Attention ! </strong> Votre porte-documents atteindra bientôt la limite autorisée.</p>
</div>

<div class="alert alert-danger" role="alert">
  <div class="alert-content">
    <p><strong>Erreur :-(</strong></p>
    <p>Le formulaire est incomplet, il contient 2 erreur(s) : </p>
    <ul>
      <li>L’adresse électronique est incorrecte.</li>
      <li>Le mot de passe est incorrect.</li>
    </ul>
  </div>
</div>

Démo

Votre messagerie : Vous avez 123 nouveaux messages privés. Accédez à votre boîte de messages.