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 indi- quer approximativement le temps qu’il lui reste à attendre. Les classes progress et progress-bar permettent de réaliser facilement ce genre d’effet. Pour les exemples, je prévois un peu de code javascript pour simuler un processus temporel. Voici la barre de base :
1 <div class=" container "> 2 <div class=" progress ">
3 <div class=" progress - bar "></div> 4 </div>
5 <input type=" button " class=" btn btn - primary " id=" animer "
value=" Animer ">
6 </div>
7 <script src=" assets /js/ jquery .js"></script> 8 <script>
9 function timer (n) {
10 $(". progress - bar "). css (" width ", n + "%"); 11 if(n < 100 ) { 12 setTimeout ( function () { 13 timer (n + 10); 14 }, 200 ); 15 } 16 } 17 $( function (){
18 $("# animer "). click ( function () { 19 timer (0);
20 });
22 </script>
Ce qui donne la figure 5.53.
Figure 5.53 – Barre de progression simple Testez ! http://bootstrap.twit.free.fr/tutov3/barre01.html
Le code correspondant à la barre figure aux lignes 2, 3 et 4, le reste est juste l’intendance pour l’animer pour l’exemple. On se contente de faire évoluer la propriété width de la barre.
Il existe une version rayée de la barre avec la classe progress-striped : 1 <div class=" progress progress - striped ">
2 <div class=" progress - bar "></div> 3 </div>
Ce qui donne la figure 5.54.
Figure 5.54 – Barre de progression rayée Testez ! http://bootstrap.twit.free.fr/tutov3/barre02.html
Il existe aussi une version rayée et élégamment animée avec la classe active : 1 <div class=" container ">
2 <div class=" progress progress - striped active "> 3 <div class=" progress - bar "></div>
4 </div>
5 <div id=" pourcentage " class="pull - right "></div>
6 <input type=" button " class=" btn btn - primary " id=" animer "
value=" Animer ">
7 </div>
8 <script src=" assets /js/ jquery .js"></script> 9 <script>
10 function timer (n) {
11 $(". progress - bar "). css (" width ", n + "%"); 12 $("# pourcentage "). text (n + "%");
19 $( function (){
20 $("# animer "). click ( function () { 21 timer (0);
22 });
23 });
24 </script>
Ce qui donne la figure 5.55, même si sur l’image vous ne voyez pas l’animation. . .
Figure 5.55 – Barre de progression rayée et animée
Testez ! http://bootstrap.twit.free.fr/tutov3/barre03.html Pour changer un peu, j’ai prévu l’affichage du pourcentage. Remarquez l’utilisation de la classe pull-right pour envoyer cet affichage sur la droite.
Il est également prévu des couleurs différentes pour enrichir la sémantique de ces barres, que ce soit en version unie ou rayée :
1 <div class=" container "> 2 <div class=" progress ">
3 <div class=" progress - bar progress -bar - info "></div> 4 </div>
5 <div class=" progress ">
6 <div class=" progress - bar progress -bar - success "></div> 7 </div>
8 <div class=" progress ">
9 <div class=" progress - bar progress -bar - warning "></div> 10 </div>
11 <div class=" progress ">
12 <div class=" progress - bar progress -bar - danger "></div> 13 </div>
14 <div class=" progress progress - striped ">
15 <div class=" progress - bar progress -bar - info "></div> 16 </div>
17 <div class=" progress progress - striped ">
18 <div class=" progress - bar progress -bar - success "></div> 19 </div>
20 <div class=" progress progress - striped ">
21 <div class=" progress - bar progress -bar - warning "></div> 22 </div>
23 <div class=" progress progress - striped ">
24 <div class=" progress - bar progress -bar - danger "></div> 25 </div>
26 <input type=" button " class=" btn btn - primary " id=" animer "
value=" Animer ">
27 </div>
Ce qui donne la figure 5.56.
Figure 5.56 – Des barres colorées Testez ! http://bootstrap.twit.free.fr/tutov3/barre04.html Une dernière possibilité, enfin, consiste à empiler des barres : 1 <div class=" container ">
2 <div class=" progress ">
3 <div class=" progress - bar progress -bar - success "></div> 4 <div class=" progress - bar progress -bar - warning "></div> 5 <div class=" progress - bar progress -bar - danger "></div> 6 </div>
7 <input type=" button " class=" btn btn - primary " id=" animer "
value=" Animer ">
8 </div>
9 <script src=" assets /js/ jquery .js"></script> 10 <script>
11 function timer (n) {
12 $(". progress - bar "). css (" width ", n + "%"); 13 if(n < 33.2) {
14 setTimeout ( function () { 15 timer (n + 3.33); 16 }, 200 );
23 }); 24 </script>
Ce qui donne la figure 5.57.
Figure 5.57 – Des barres empilées
Testez ! http://bootstrap.twit.free.fr/tutov3/barre05.html Dans cette version empilée, on conserve la possibilité d’avoir des rayures, animées ou pas. . .
En résumé
– Bootstrap permet de créer une barre de navigation fixe ou mobile qui peut comporter un titre, des liens, des boutons et des formulaires.
– Bootstrap possède un composant pour la navigation entre pages web.
– Pour des effets visuels Bootstrap propose son Jumbotron, des libellés, des badges et des thumbnails pour les images.
– Les listes groupées peuvent comporter des badges, des liens, des images et être colo- rées.
– La panneaux permettent d’isoler visuellement une partie de la page et peuvent com- porter un titre, ils peuvent intégrer facilement une liste groupée ou un tableau. – Le composant media permet de proposer des images, des musiques, des vidéos. – Bootstrap permet l’affichage de bandeaux d’alerte colorés et de barres de progression.