bandeaux d’alerte Archives

Les classes d’emphase

Bootstrap 3 met à votre disposition plusieurs classes d’emphase pour générer des messages d’information basiques. Le tableau ci-dessous décrit les différentes classes d’emphase :

Classe	Couleur
.text-muted	Gris
.text-primary	Bleu pâle
.text-success	Vert
.text-info	Bleu
.text-warning	Orange
.text-danger	Rouge

Créons à présent nos premiers messages d’information “basiques” :

<p class="text-muted">   Classe muted - Gris</p> 
<p class="text-primary"> Classe primary - Bleu pâle</p> 
<p class="text-success"> Classe success - Vert</p> 
<p class="text-info">    Classe info - Bleu</p> 
<p class="text-warning"> Classe warning - Orange</p> 
<p class="text-danger">  Classe danger - Rouge</p>

<p class="text-muted"> Classe muted - Gris</p>

<p class="text-primary"> Classe primary - Bleu pâle</p>

<p class="text-success"> Classe success - Vert</p>

<p class="text-info"> Classe info - Bleu</p>

<p class="text-warning"> Classe warning - Orange</p>

<p class="text-danger"> Classe danger - Rouge</p>

Les messages d’information ont l’aspect (simple coloration du message) suivant :

Exemple des classes d’emphase – Bootstrap 3

Les bandeaux d’alerte contextuels

Pour donner un aspect professionnel et beaucoup plus ergonomique aux messages d’information, Bootstrap 3 met à votre disposition les bandeaux d’alerte contextuels.

a – Les bandeaux d’alerte simples

Pour créer d’alerte, il convent de faire appel à la classe .alert.Puis nous ajouterons à cette classe la sous classe désignant le contexte du message (information, danger,…). Bootstrap 3 mis à votre disposition quarte sous-classes :

Sous classe	Couleur
.alert-success	Vert
.alert-info	Bleu
.alert-warning	Orange
.alert-danger	Rouge

Créons à présent nos premiers bandeaux d’alerte simples :

<p class="alert alert-success">Bandeau d’alerte - la classe success</p> 
<p class="alert alert-info">Bandeau d’alerte - la classe info</p> 
<p class="alert alert-warning">Bandeau d’alerte - la classe warning</p> 
<p class="alert alert-danger">Bandeau d’alerte - la classe danger</p>

<p class="alert alert-success">Bandeau d’alerte - la classe success</p>

<p class="alert alert-info">Bandeau d’alerte - la classe info</p>

<p class="alert alert-warning">Bandeau d’alerte - la classe warning</p>

<p class="alert alert-danger">Bandeau d’alerte - la classe danger</p>

Les bandeaux d’alerte simple ont l’aspect suivant :

Exemple de bandeaux d’alerte simples – Bootstrap 3

b – Les bandeaux d’alerte complexes

Nous avons vu dans l’exemple précédent que les bandeaux d’alerte simples ne contiennent que du texte. Mais il est parfois nécessaire d’ajouter du contenu HTML plus complexe. En plus, avec l’API JavaScript de Bootstrap 3, vous avez la possibilité de faire disparaitre un bandeau d’alerte en utilisant soit la fonction fadeOut() de jQuery. Celle-ci, peut être appelée de deux façons : en ajoutant un bouton en forme de croix en haut à droite du bandeau ou en utilisant la fonction ad hoc JavaScript alert().

<!DOCTYPE html> 
<html lang="fr"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Les bandeaux d’alerte complexes - Opentuto</title> 

    <link href="css/bootstrap.css" rel="stylesheet"> 

    <!-- comme nous avons à utiliser l'API JavaScript de Bootstrap 3, nous devons 
    appeler le framework JQuery. -->
    <script src="js/jquery.js"></script> 

    <!-- Chargement de l'API JavaScript de Bootstrap 3. -->
    <script src="js/bootstrap.min.js"></script> 
  </head> 

  <body> 

    <div class="container"> 
   <br/>
          <div class="alert alert-dismissable alert-success"> 
                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 

                 <p>Visitez notre premier opentuto : Bootstrap 3! <a href="http://www.opentuto.com/tutoriels/maitriser-bootstrap-3-par-la-pratique/">Bootstrap 3</a></p> 

                 <p><button id="myButton" type="button" class="btn btn-primary">Fermer</button></p> 

           </div> <!-- Fin du bandeau d'alerte -->

            <script> 
                  $('#myButton').click(function(){ /* Après le clic sur l'élément dont l'id est "myButton" (le bouton dans notre cas) "*/
                        $('.alert').alert('close'); /* Faire disparaitre le bandeau d'alerte*/
                  }); 
            </script> 
    </div>           
    </div> 

  </body> 
</html>

<!DOCTYPE html>

<head>

<title>Les bandeaux d’alerte complexes - Opentuto</title>

<!-- comme nous avons à utiliser l'API JavaScript de Bootstrap 3, nous devons

appeler le framework JQuery. -->

</head>

<body>

<br/>

<p>Visitez notre premier opentuto : Bootstrap 3! <a href="http://www.opentuto.com/tutoriels/maitriser-bootstrap-3-par-la-pratique/">Bootstrap 3</a></p>

<p><button id="myButton" type="button" class="btn btn-primary">Fermer</button></p>

</div>

$('#myButton').click(function(){ /* Après le clic sur l'élément dont l'id est "myButton" (le bouton dans notre cas) "*/

$('.alert').alert('close'); /* Faire disparaitre le bandeau d'alerte*/

});

</script>

</div>

</body>

</html>

Explication du code :

<div class="alert alert-dismissable alert-success"> : cette ligne permet de créer un bandeau d’alerte (classe .alert), que l’utilisateur peut faire disparaitre (classe .alert-dismissable), et que nous utiliserons la sous classe .alert-success pour définir l’aspect du message d’alerte.

<button type="button" data-dismiss="alert" aria-hidden="true">×</button> : création d’un bouton en forme de croix (×) en haut à droite du bandeau.

<p><button id="myButton" type="button">Fermer</button></p> : L’ajout du bouton, qui permet de fermer le bandeau.

Exemple de bandeau d’alerte complexe – Bootstrap 3

Pour faire disparaire le bandeau d’alrte, cliquez soit en cliquant sur le bouton “Fermer”, soit en cliquant sur la croix en haut à droite.