Alertes bootstrap

Tutoriel Bootstrap

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

HTML HTML5 CSS Dreamweaver PHP

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

C'est parfait

C'est OK

C'est un peu risqué

C'est trés dangereux

<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

Attention ! Cette alerte peut se fermer.


<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

Lien vers mon site

<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>