Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Alertes Bootstrap

Les alertes sont utilisées pour afficher des messages à l'utilisateur.

Nous retrouverons 4 niveaux d'alerte : success (Vert), info (Bleu pâle), warning (Jaune) et danger (Rouge).

En fonction que le résultats soit bien ou non on utilise une de ces classes.

Utilisation

Nous utiliserons 2 classes alert et alert-niveau .il faut remplacer le mot niveau par success, info, warning ou danger.

Exemple

<div class="alert alert-success" role="alert">C'est parfait</div>
<div class="alert alert-info" role="alert">C'est OK</div>
<div class="alert alert-warning" role="alert">C'est un peu risqué</div>
<div class="alert alert-danger" role="alert">C'est trés dangereux</div>

Des alertes qui peuvent être fermées

Il faudra utiliser la classe .alert-dismissible et un bouton pour fermer.

Pour profiter pleinement des fonctionnalités .alert-dismissible, il faut utiliser le plugin Javascript pour les alerts.

Exemple

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span></button>
  <strong>Attention !</strong> Cette alerte peut se fermer.
</div>

Des liens dans les alertes

Un lien hypertexte de la même couleur que le contenu texte de l'alerte, pour cela, il faut ajouter la classe .alert-link dans le lien.

Exemple

<div class="alert alert-success" role="alert">
  Lien vers <a href="http://www.conseil-webmaster.com/" title="Mon site" class="alert-link" target="_blank">
   mon site</a>
</div>