Nous allons voir maintenant deux composants qui, bien que ne nécessitant pas de Javascript pour leur présentation, en ont besoin pour leur mise en œuvre.

Alertes

Utilisation de base

Les alertes permettent de présenter un message visuellement significatif. Il suffit d’utiliser la classe alert accompagnée d’une classe alert-*, par exemple :

<div class="alert alert-warning">
  <strong>Attention!</strong> Vous allez trop loin !
</div>

Les 4 variantes

Il existe 8 classes de la forme alert-* :

<div class="alert col-lg-2 alert-primary"><strong>Primary</strong></div>
<div class="alert col-lg-2 alert-secondary"><strong>Secondary</strong></div>
<div class="alert col-lg-2 alert-info"><strong>Infos</strong></div>
<div class="alert col-lg-2 alert-success"><strong>Success</strong></div>
<div class="alert col-lg-2 alert-danger"><strong>Danger</strong></div>
<div class="alert col-lg-2 alert-warning"><strong>Warning</strong></div>
<div class="alert col-lg-2 alert-light"><strong>Light</strong></div>
<div class="alert col-lg-2 alert-dark"><strong>Dark</strong></div>

Un bloc d’information

Si le texte doit être conséquent, il suffit d’écrire le code HTML que l’on désire avec à disposition la classe alert-heading pour le titre :

<div class="alert alert-warning">
    <h3 class="alert-heading">Information importante!</h4>
    <p>L'utilisation de la classe <strong>alert</strong> n'est pas sans danger pour les yeux fatigués des pauvres internautes, et je vous demande instamment de l'utiliser avec parcimonie...</p>
</div>

Un lien dans une alerte

La classe alert-link permet d’insérer un lien esthétique dans une alerte :

<div class="alert alert-info">
    Un <a href="#" class="alert-link">joli lien</a> dans une alerte...
</div>

Un bouton de fermeture

Une fois qu’on a lu une alerte, on peut avoir envie de la fermer. Il suffit de prévoir un bouton et d’ajouter la classe alert-dismissible pour bien disposer les éléments :

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Fermer</span>
  </button>
  <strong>Attention!</strong> Vous allez vraiment trop loin !
</div>

Pour que le bouton de fermeture fonctionne il faut un peu de Javascript. On verra dans une partie ultérieure du cours comment on gère cet aspect. Pour le moment pour que ça fonctionne ajoutez ces lignes en bas du body :

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

Assurez-vous d’avoir bien mis le fichier Javascript dans le dossier pointé.

Utilisation dynamique

Ces alertes ne trouvent leur sens que dans un contexte dynamique et nous devons pouvoir les faire apparaître et disparaître quand le besoin se présente. Bootstrap prévoit un petit plugin qui ne me paraît pas vraiment utile, étant donné qu’on peut facilement gérer les alertes avec quelques lignes de Javascript dopées par jQuery :

<div class="container">
  <br>
  <div class="alert alert-warning" style="display: none">
    <button type="button" class="close" id="fermer">&times;</button>
    <h4 class="alert-heading">Attention!</h4> 
    <p>Petite information importante !</p>
  </div>
  <input type="button" class="btn btn-primary" value="Afficher l'alerte">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script>  
  $(function (){
    $("input.btn").click(function() {
      $("input.btn").hide("slow")
      $(".alert").show("slow")
    })
    $(".close").click(function() {
      $(".alert").hide("slow")
      $("input.btn").show()
    })
  })
</script>

Tester en ligne

Un bouton déclencheur :

Une alerte déclenchée :

Un bouton adapté par la classe close a été prévu pour la fermeture de l’alerte. On pourrait également mettre un bouton normal.

Barres de progression

Les barres de progression constituent une façon élégante de faire patienter l’utilisateur pendant une longue tâche. Elles ont aussi pour vocation de le rassurer et de lui indiquer approximativement le temps qu’il lui reste à attendre.

Barre de base

La classe progress permet de réaliser facilement ce genre d’effet associée à la classe progress-bar. Pour les exemples, je prévois un peu de code Javascript pour simuler un processus temporel. Voici une barre de base :

<div class="container"> 
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <input type="button" class="btn btn-primary mt-2" id="animer" value="Animer">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%")
    if(n < 100) {
      setTimeout(function() {
        timer(n + 1)
      }, 20)
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0)
    })
  })
</script>

On se contente de faire évoluer la règle css width de la barre.

On peut faire apparaître un pourcentage sur la barre ?

Oui, il suffit de changer la valeur du texte dans la balise avec le Javascript :

function timer(n) {
  var value = n + "%"
  $(".progress-bar").css("width", value).text(value)

Tester en ligne

Barre rayée

Il existe une version rayée de la barre avec la classe progress-bar-striped :

<div class="progress-bar progress-bar-striped"></div>

Tester en ligne

Il existe aussi une version rayée et animée avec la classe progress-animated :

<div class="progress-bar progress-bar-striped progress-bar-animated"></div>

Un peu de couleurs

On peut prévoir des couleurs différentes pour enrichir la sémantique de ces barres, que ce soit en version unie ou rayée :

<div class="container">
  <div class="progress">
    <div class="progress-bar bg-info"></div>
  </div>
  <div class="progress mt-2">
    <div class="progress-bar bg-info-success"></div>
  </div>
  <div class="progress mt-2">
    <div class="progress-bar bg-warning"></div>
  </div>
  <div class="progress mt-2">
    <div class="progress-bar bg-danger"></div>
    </div>
  <div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-info"></div>
    </div>
  <div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-success"></div>
    </div>
  <div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-warning"></div>
    </div>
  <div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-danger"></div>
  </div>
  <input type="button" class="btn btn-primary mt-2" id="animer" value="Animer">
</div>

Tester en ligne

L’animation se fait avec le même code Javascript que ci-dessus.

Empiler des barres

On peut aussi empiler plusieurs barres, il suffit de tout englober avec la classe progress :

<div class="progress">
  <div class="progress-bar bg-danger"></div>
  <div class="progress-bar br-primary"></div>
</div>

Accessibilité

Alertes

Pour les alertes il convient d’ajouter le rôle ‌alert pour signifier qu’on communique un message important ou urgent. Par exemple :

<div class="alert alert-warning" role="alerte">
  Attention !
</div>

D’autre part on a vu plus haut les dispositions à prendre quand on ajoute un bouton de fermeture.

Barres de progression

Pour les barres de progression il convient de préciser le rôle progressbar et les valeurs, par exemple :

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

En résumé

• Bootstrap permet l’affichage de bandeaux d’alerte colorés.
• Bootstrap permet l’affichage de barres de progression classiques ou rayées, faciles à animer.