Fil d'Ariane
Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours existe en eBook.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les composants intégrés

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Bootstrap propose des composants pratiques à mettre en œuvre : barres de navigation, effets typographiques, panneaux, thumbnails… et tout ça sans écrire une seule ligne de code Javascript. Nous verrons aussi alertes et barres de progression qui demandent un peu de Javascript pour être utilisées…

Allez c'est parti pour une visite guidée !

La navigation

La page d'exemple

Voici le code ajouté à la page d'exemple pour l'équiper d'une barre de navigation :

<!DOCTYPE HTML>
<html>

  <head>
  
    ...

    <style type="text/css">

        ...
            
        .inline-form input {
            display: inline-block;
            width: 100px;
        }
        
    </style>

  </head>

  <body>
    <div class="container">

      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"> <a href="#">Accueil</a> </li>
            <li> <a href="#">Liens</a> </li>
            <li> <a href="#">Témoignages</a> </li>
            <li> <a href="#">Références</a> </li>
          </ul>
          <form class="navbar-form navbar-right inline-form">
            <div class="form-group">
              <input type="search" class="input-sm form-control" placeholder="Recherche">
              <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
            </div>
          </form>
        </div>
      </nav>
      
      ...   contenu   ...
      
    </div>
  </body>
</html>

Ce qui nous donne la figure suivante.

La page d'exemple
La page d'exemple

Tester

Une barre de navigation

Principe de base

Bootstrap propose de superbes classes pour créer une barre de navigation. À la base, une barre nécessite juste les classesnavbar etnavbar-default:

<nav class="navbar navbar-default">
    Je suis une barre
</nav>

Ce code donne la figure suivante.

Une simple barre
Une simple barre

La classenavbar est toute simple :

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

Une hauteur fixée à 50 pixels, une petite marge basse pour bien distinguer la barre du reste de la page, une bordure fine et une position relative. La classenavbar-default fixe les couleurs du fond et de la bordure :

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

Pourquoi 2 classes ? Nous verrons plus loin qu'il est possible d'avoir une barre « inversée », avec une couleur de fond différente.

Mais une barre vide ne sert pas à grand chose, en général on la garnit d'items. Voici un exemple :

<div class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li class="active"> <a href="#">Accueil</a> </li>
    <li> <a href="#">Liens</a> </li>
    <li> <a href="#">Témoignages</a> </li>
    <li class="disabled"> <a href="#">Références</a> </li>
  </ul>
</div>

Les classesnav etnavbar-nav doivent être utilisées avec une balise<ul>. Tous les items de navigation apparaissent alors avec des balises<li>. L'item actif est repéré avec la classeactive. Un item désactivé est défini avec la classedisabled. Voici à la figure suivante un aperçu de la barre.

Effet des classes navbar et navbar-default
Effet des classes navbar et navbar-default
Barre avec un fond noir

Si vous préférez une barre avec un fond noir, il suffit de remplacer la classenavbar-default par la classenavbar-inverse:

<div class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li class="active"> <a href="#">Accueil</a> </li>
    <li> <a href="#">Liens</a> </li>
    <li> <a href="#">Témoignages</a> </li>
    <li> <a href="#">Références</a> </li>
  </ul>
</div>

On obtient alors le résultat de la figure suivante.

Un fond noir avec la classe navbar-inverse
Un fond noir avec la classe navbar-inverse
Un titre dans la barre

On peut faire apparaître un titre avec des caractères plus visibles avec la classenavbar-brand:

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Mon beau site</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Accueil</a></li>
    <li><a href="#">Liens</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Références</a></li>
    <li><a href="#">Bibliographie</a></li>
  </ul>
</div>

Ce qui nous donne la figure suivante.

Un titre dans la barre
Un titre dans la barre

Le titre doit être inclus dans une classenavbar-header pour avoir un affichage correct sur les mobiles.

Fixer la barre ?

A priori, on veut une barre de navigation dans la partie supérieure d'un site, mais en général sous un bandeau. Avec le code tel qu'on l'a vu jusque-là, la barre se situe dans le flux. Par exemple…

<p>Un paragraphe</p>
<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Mon beau site</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Accueil</a></li>
    <li><a href="#">Liens</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Références</a></li>
    <li><a href="#">Bibliographie</a></li>
  </ul>
</div>
<p>Un autre paragraphe</p>

… donnera la figure suivante.

La barre est dans le flux
La barre est dans le flux

On peut fixer la barre en haut de la page du navigateur avec la classenavbar-fixed-top:

<p>Un paragraphe</p>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mon beau site</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Accueil</a></li>
      <li><a href="#">Liens</a></li>
      <li><a href="#">Témoignages</a></li>
      <li><a href="#">Références</a></li>
      <li><a href="#">Bibliographie</a></li>
    </ul>
  </div>
</div>
<p>Un autre paragraphe</p>
<p>Encore un autre paragraphe</p>

Ce qui nous donne la figure suivante.

Barre fixée en haut de la page

La barre prend alors toute la largeur de la fenêtre. Les éléments de la page se déplacent sous la barre fixe en cas de scrolling.

Mais où sont passés les 2 premiers paragraphes ?

Il sont sous la barre ! Il suffit de regarder la classe pour comprendre :

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

La barre est en positionnement fixe en haut de la page du navigateur avec unz-index important… Donc si on adopte un positionnement fixe en haut de la page du navigateur, il faut prendre la précaution de ménager suffisamment d'espace pour que les éléments ne soient pas masqués par la barre :

<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body { padding-top: 70px; }
</style>

Ce qui nous donne la figure suivante.

Barre avec espace réservé

Maintenant on retrouve nos paragraphes bien visibles !

Il existe aussi la classenavbar-fixed-bottom pour fixer la barre en bas de la page, mais les cas d'utilisation sont plus anecdotiques. Le principe demeure le même.

Une barre statique

Une barre fixe située en haut reste collée au bord de la fenêtre, et quand vous faites défiler avec l’ascenseur, le contenu passe sous la barre de façon logique. Il se peut que vous désiriez que la barre suive le mouvement et ne soit plus collée au bord de la fenêtre, mais au-dessus du contenu. Dans ce cas, évidemment, la barre disparaît quand vous faites défiler. Il faut alors utiliser la classenavbar-static-top:

<div class="navbar navbar-default navbar-static-top">
Un formulaire de recherche dans la barre

Pour intégrer un formulaire il suffit d'ajouter une balise<form> avec la classenavbar-form. On a 2 classes pour envoyer ce formulaire sur l'un des côtés :

  • navbar-right pour le fixer à droite

  • navbar-left pour le fixer à gauche

Voici l'intégration pour notre page d'exemple :

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"> <a href="#">Accueil</a> </li>
      <li> <a href="#">Liens</a> </li>
      <li> <a href="#">Témoignages</a> </li>
      <li> <a href="#">Références</a> </li>
    </ul>
    <form class="navbar-form navbar-right inline-form">
      <div class="form-group">
        <input type="search" class="input-sm form-control" placeholder="Recherche">
        <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
      </div>
    </form>
  </div>
</nav>

Ce qui nous donne la figure suivante.

Un formulaire dans la barre

Je retrouve bien mon formulaire envoyé à droite. Vous allez peut-être vous poser des questions concernant la classeinline-form. Ce n'est pas une classe de Bootstrap ! Mais une classe que j'ai dû ajouter pour obtenir un comportement correct du formulaire. Regardez ce qui se produit si je réduis la largeur de l'affichage sans cette classe :

Réaction du formulaire à la réduction de l'affichage
Réaction du formulaire à la réduction de l'affichage

J'ai deux soucis :

  • le contrôle prend toute la largeur,

  • le bouton est renvoyé en dessous.

Il faut donc que je modifie le display du contrôle et que je limite sa largeur. Ce qui est fait par la classeinline-form :

.inline-form input {
  display: inline-block;
  width: 100px;
}

Maintenant j'ai un affichage correct que l'on peut voir à la figure suivante.

Effet de la classe inline-form
Effet de la classe inline-form

Pourquoi ne pas utiliser la classe form-inline de Bootstrap ?

Cette classe ne fonctionne que si la largeur d'affichage est d'au moins 768px, et c'est justement au-dessous qu'on rencontre le problème !

Bouton et texte dans une barre

Il existe la classenavbar-btn pour intégrer un bouton dans une barre, mais qui doit être utilisée uniquement si le bouton n'appartient pas à un formulaire. Il y a aussi la classenavbar-text pour insérer du texte et la classenavbar-link pour afficher un lien en dehors du menu (non inclu dans la classe nav). Voici un exemple :

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Un titre</a>
  </div> 
  <p class="navbar-text">Un simple texte</p>
  <button type="button" class="btn btn-default navbar-btn">Bouton</button>
  <p class="navbar-text"><a href="#" class="navbar-link">Lien</a></p>
</nav>

Ce qui nous donne la figure suivante.

Texte, bouton et lien dans la barre

La pagination

Un exemple simple

Bootstrap propose la classepagination pour réaliser… des paginations. Le principe est tout simple, voici un exemple de base :

<div class="container">
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

On obtient alors le résultat visible à la figure suivante.

Pagination simple
La dimension

Il y a 3 possibilités de dimension pour la pagination :

<div class="col-lg-3">
  <ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
  <ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

Ce qui nous donne le rendu visible à la figure suivante.

Plusieurs dimensions pour la pagination
Un cas pratique

On va utiliser cette possibilité de pagination sur un exemple pratique à partir des photos de tigres que j'utilise dans ma page de démonstration. Le but est de faire défiler les images 3 par 3. Pour définir la page actuelle on utilise la classeactive.

<!DOCTYPE HTML>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { background-color:#DDD; }
      img { width: 100%; }
      a:focus { outline:0; } 
    </style>
  </head>

<body>

  <br>
  <div class="container">
    <div id="content" class="row">
        <div class="col-lg-2"><img src="images/t1.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t2.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t3.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t4.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t5.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t6.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t7.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t8.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t9.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t10.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t11.jpg" alt="Tigre" class="img-thumbnail"></div>
        <div class="col-lg-2"><img src="images/t12.jpg" alt="Tigre" class="img-thumbnail"></div>
    </div>
    <div id="page_navigation"> </div>
  </div>

  <script src="assets/js/jquery.js"></script>
  <script> 

    var show_per_page = 3; 
    var current_page = 0;

    function set_display(first, last) {
      $('#content').children().css('display', 'none');
      $('#content').children().slice(first, last).css('display', 'block');
    }

    function previous(){
        if($('.active').prev('.page_link').length) go_to_page(current_page - 1);
    }

    function next(){
        if($('.active').next('.page_link').length) go_to_page(current_page + 1);
    }

    function go_to_page(page_num){
      current_page = page_num;
      start_from = current_page * show_per_page;
      end_on = start_from + show_per_page;
      set_display(start_from, end_on);
      $('.active').removeClass('active');
      $('#id' + page_num).addClass('active');
    }  

    $(document).ready(function() {

      var number_of_pages = Math.ceil($('#content').children().length / show_per_page);
      
      var nav = '<ul class="pagination"><li><a href="javascript:previous();">&laquo;</a>';

      var i = -1;
      while(number_of_pages > ++i){
        nav += '<li class="page_link'
        if(!i) nav += ' active';
        nav += '" id="id' + i +'">';
        nav += '<a href="javascript:go_to_page(' + i +')">'+ (i + 1) +'</a>';
      }
      nav += '<li><a href="javascript:next();">&raquo;</a></ul>';

      $('#page_navigation').html(nav);
      set_display(0, show_per_page);
      
    });

  </script>

</body>
  
</html>

Ce qui nous donne la figure suivante.

La pagination en action

Tester

Pagination esthétique

Une autre possibilité de pagination simple consiste à utiliser la classepager:

<ul class="pager">
  <li><a href="#">Précédent</a></li>
  <li><a href="#">Suivant</a></li>
</ul>

Ce qui nous donne la figure suivante.

Pagination esthétique
Pagination esthétique

Par défaut, les boutons sont centrés. Pour les disposer de part et d'autre, il faut utiliser les classesprevious etnext:

<ul class="pager col-lg-4">
  <li class="previous"><a href="#"><span class="glyphicon glyphicon-backward"></span> Précédent</a></li>
  <li class="next"><a href="#">Suivant <span class="glyphicon glyphicon-forward"></span></a></li>
</ul>

On obtient alors le résultat visible à la figure suivante.

Bouton décalés avec les classes previous et next
Bouton décalés avec les classes previous et next

Aide à la navigation

L'aide à la navigation suit le même principe que la pagination, avec la classebreadcrumb dans la balise<ul> et utilisation de la classeactive pour définir l'élément actif :

<ul class="breadcrumb">
  <li class="active"><a href="#">Accueil</a></li>
  <li><a href="#">Témoignages</a></li>
  <li><a href="#">Chasseurs</a></li>
</ul>

Ce qui nous donne la figure suivante.

Effet de la classe breadcrumb
Effet de la classe breadcrumb

Effets typographiques et thumbnails

La page d'exemple

Pour la nouvelle version de la page d'exemple, on va avoir une amélioration de la présentation des photos avec le composantthumbnails et des badges dans la liste des tigres, comme à la figure suivante.

Image utilisateur

On va aussi prévoir un libellé dans le formulaire et améliorer la présentation de l'adresse (voir figure suivante).

Image utilisateur

Tester

Jumbotron

Jumbotron contenu

La classejumbotron permet de rendre le texte très visible. Prenons un exemple :

<h1>Coucou</h1>
<p>et bonjour</p>
<div class="jumbotron">
  <h1>Coucou</h1>
  <p>et bonjour</p>
</div>

Ce qui donne la figure suivante.

La classe jumbotron
La classe jumbotron

On voit bien la différence entre les éléments « normaux » et ceux qui bénéficient de la classejumbotron.

Voyons cette classe :

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}

Un peu de gris en fond, un réglage de hauteur de ligne et quelques marges.

Jumbotron pleine largeur

Vous avez certainement rencontré des sites créés avec Bootstrap comportant des panneaux occupant toute la largeur de la page. On réalise cela facilement avec la classejumbotron, mais il faut organiser différemment le code. Il ne faut pas le mettre dans un conteneur, en revanche il faut en prévoir un à l'intérieur. Voici un exemple :

<div class="jumbotron">
  <div class="container">
    <h1>Bonjour je suis le Jumbotron</h1>
    <p>J'aime bien prendre mes aises et occuper tout l'espace pour que l'on me remarque facilement !</p>
    <p><a class="btn btn-info btn-lg" role="button">En savoir plus  <span class="glyphicon glyphicon glyphicon-hand-right"></span></a></p>
  </div>
</div>

Ce qui donne la figure suivante.

Un jumbotron en pleine largeur

Il est facile avec un peu de style ajouté de personnaliser le jumbotron :

.jumbotron {
  color: #533; 
  background-color: #9bb 
}

Avec le résultat à la figure suivante.

Le jumbotron personnalisé
Le jumbotron personnalisé

Des libellés colorés

Pour créer des repères visuels textuels attractifs, il est possible de créer de beaux libellés :

<p><span class="label label-default">Valeur d'inhibition</span> 600</p>
<p><span class="label label-info">Valeur de signalement</span> 4000</p>
<p><span class="label label-success">Valeur de fonctionnement</span> 8000</p>
<p><span class="label label-primary">Valeur optimale</span> 10000</p>
<p><span class="label label-warning">Valeur dangereuse</span> 11000</p>
<p><span class="label label-danger">Valeur critique</span> 12000</p>

Ce qui donne la figure suivante.

Des libellés colorés

Ces libellés s'adaptent en dimension :

<h1><span class="label label-success">H1</span></h1>
<h2><span class="label label-success">H2</span></h2>
<h3><span class="label label-success">H3</span></h3>
<h4><span class="label label-success">H4</span></h4>
<h5><span class="label label-success">H5</span></h5>
<h6><span class="label label-success">H6</span></h6>

On obtient ainsi un rendu identique à celui de la figure suivante.

Plusieurs dimensions pour les libellés
Plusieurs dimensions pour les libellés

J'ai utilisé un libellé dans le formulaire de contact de la page d'exemple :

<h4><span class="label label-default">Si vous voulez me laisser un message</span></h4>
<h4>Comment m'avez-vous trouvé ?</h4>

On obtient ainsi la figure suivante.

Un libellé dans un formulaire
Un libellé dans un formulaire

Des badges

Les badges sont un peu comme les libellés, mais pour des informations plus courtes, idéalement des nombres :

<a href="#">Messages reçus <span class="badge">42</span></a>

Ce qui donne la figure suivante.

Un badge simple
Un badge simple

Comme le badge se trouve dans une balise<span>, il est facile de l'intégrer par exemple à un bouton et de le colorer :

<button class="btn btn-danger">Envoi <span class="badge text-success">42</span></button>

Ce qui donne la figure suivante.

Stylisation du badge
Stylisation du badge

J'ai ajouté des badges sur la page d'exemple pour représenter le nombre de tigres :

<ul>
  <li>Tigre de Sibérie <span class="badge">230</span></li>
  <li>Tigre de Chine méridionale <span class="badge">120</span></li>
  <li>Tigre de Bali <span class="badge">540</span></li>
  <li>Tigre de d'Indochine <span class="badge">230</span></li>
  <li>Tigre de Malaisie <span class="badge">240</span></li>
  <li>Tigre de Java <span class="badge">1200</span></li>
  <li>Tigre de Sumatra <span class="badge">710</span></li>
  <li>Tigre du Bengale <span class="badge">20</span></li>
  <li>Tigre de la Caspienne <span class="badge">40</span></li>
</ul>

Ce qui donne la figure suivante.

Badges dans une liste
Badges dans une liste

Thumbnails

Si vous avez des images, des vidéos ou tous autres éléments à afficher dans une grille, Bootstrap propose le composant Thumbnails très facile à mettre en œuvre. Je reviens sur ma page d'exemple qui comporte de petites images de tigres. Jusque-là, j'ai positionné les images en utilisant tout simplement la grille :

<section class="row">
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre" class="img-rounded"></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre" class="img-rounded"></div>
</section>

Ce qui donne une organisation bien régulière, comme le montre la figure suivante.

Disposition des images avec la grille
Disposition des images avec la grille

Voyons ce que ça donne avec le composant Thumbnails. Le principe est simple, il faut utiliser la classethumbnail, par exemple dans une balise<a>. Voilà ce que cela donne pour la page d'exemple en supposant que les vignettes servent de liens :

<section class="row">
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t1.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t2.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t3.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t4.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t5.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t6.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t7.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t8.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t9.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t10.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t11.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 ">
    <a href="#" class="thumbnail">
      <img src="images/t12.jpg" alt="Tigre" class="img-rounded">
    </a>
  </div>
</section>

On obtient ainsi le même résultat qu'à la figure suivante.

Effet de la classe thumbnail
Effet de la classe thumbnail

Remarquez à la figure suivante la stylisation quand on passe le curseur de la souris.

Effet du passage du curseur de la souris
Effet du passage du curseur de la souris

Pour des raisons d'homogénéité de la présentation, je prévois aussi de traiter la photo plus grande située au-dessous :

<div class="thumbnail">
  <img src="images/photo-tigre.jpg" alt="Tigre" class="img-rounded">
</div>

Ce qui donne la figure suivante.

Classe thumbnail appliquée à une grande image
Classe thumbnail appliquée à une grande image

Nous ne sommes évidemment pas limités à afficher des images dans un thumbnail. Puisque vous pouvez mettre cette classe dans un<div> ou autre, vous pouvez garnir le thumbnail de ce que vous voulez. Par exemple j'ai stylisé l'adresse sur la page d'exemple :

<address class="thumbnail">
  <p>Vous pouvez me contacter à cette adresse :</p>
  <strong>Tigrou Alfred</strong><br>
    Allée des fauves<br>
    28645 Félins-sur-Loire<br>
</address>

Ce qui donne la figure suivante.

Classe thumbnail appliquée à une adresse
Classe thumbnail appliquée à une adresse

Listes groupées, panneaux et médias

La page d'exemple

Nous allons encore améliorer l'aspect de la page d'exemple avec une présentation de vidéos, comme à la figure suivante.

Utilisation de la classe media
Utilisation de la classe media

On va aussi prévoir un panneau pour la liste des tigres et également pour le tableau (voir figure suivante).

Image utilisateur

Tester

Les listes groupées

Les listes groupées proposent une mise en forme des listes non ordonnées. Voici un premier exemple avec la visualisation d'une liste sans et avec formatage pour comparer :

<div class="container">
  <div class="col-lg-2">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class="col-lg-2">
    <ul class="list-group">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
      <li class="list-group-item">Item 3</li>
      <li class="list-group-item">Item 4</li>
    </ul>
  </div>
</div>

Ce qui donne la figure suivante.

Liste simple et liste groupée
Liste simple et liste groupée
Liste avec badges

Il est possible d'ajouter des badges tout simplement en intégrant un<span>, par défaut affiché à droite :

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">22</span>
    Item 1
  </li>
  <li class="list-group-item">
    <span class="badge">12</span>
    Item 2
  </li>
  <li class="list-group-item">
    <span class="badge">33</span>
    Item 3 
  </li>
  <li class="list-group-item">
    <span class="badge">87</span>
    Item 4
  </li>
</ul>

Ce qui donne la figure suivante.

Liste avec des badges
Liste avec des badges
Listes avec liens

Les éléments de la liste peuvent aussi être des liens. Il suffit de prévoir des balises<a>, l'item actif est repéré avec la classeactive:

<ul class="list-group">
  <a href="#" class="list-group-item active">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 1
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>

      Item 2
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 3
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 4
  </a>
</ul>

Ce qui donne la figure suivante.

Liste avec des liens

J'ai prévu des chevrons pour appuyer la sémantique des liens, ils sont poussés sur la droite avec la classepull-right.

Un peu de couleur

De nouvelles classes sont apparues avec la version 3.1 de Bootstrap qui permettent d'avoir un peu de couleur dans les listes groupées. Vous trouverez un exemple illustratif à la figure suivante.

<div class="col-lg-3">
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">On a gagné !</li>
    <li class="list-group-item list-group-item-info">Une petite info</li>
    <li class="list-group-item list-group-item-warning">Attention c'est chaud !</li>
    <li class="list-group-item list-group-item-danger">Par là c'est dangereux...</li>
  </ul>
</div>

Et voici le résultat visuel :

Un peu de couleur dans les listes
Un peu de couleur dans les listes
Contenus divers

La liste est suffisamment versatile pour contenir des éléments variés. On peut avoir une en-tête avec la classelist-group-item-heading, et du texte avec la classelist-group-item-text, mais on peut intégrer par exemple une image comme je le fais ici :

<ul class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Tigre 1</h4>
    <p class="list-group-item-text pull-right">Mon joli tigre 1</p>
    <img src="images/t1.jpg">
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Tigre 2</h4>
    <p class="list-group-item-text pull-right">Mon joli tigre 2</p>
    <img src="images/t2.jpg">
  </a>
</ul>

Ce qui donne la figure suivante.

Liste avec des images
Liste avec des images
Utilisation d'une liste groupée sur la page d'exemple

J'ai utilisé une liste groupée sur la page d'exemple pour les sous-espèces de tigres (avec badges, le tout intégré dans un panneau dont nous allons bientôt parler) :

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Les sous-espèces des tigres :</h3>
  </div>
    <div class="list-group">
      <a href="#" class="list-group-item">
        Tigre de Sibérie
        <span class="badge">120</span>
      </a>
      <a href="#" class="list-group-item">
        Tigre de Chine méridionale
         <span class="badge">540</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre de Bali
         <span class="badge">230</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre de d'Indochine
         <span class="badge">240</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de Malaisie
          <span class="badge">1200</span>
        </a>
       <a href="#" class="list-group-item">
          Tigre de Java
         <span class="badge">710</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de Sumatra
          <span class="badge">20</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre du Bengale
         <span class="badge">40</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de la Caspienne
          <span class="badge">200</span>
       </a>
    </div>
</div>

Ce qui donne la figure suivante.

Liste avec badges de la page d'exemple
Liste avec badges de la page d'exemple

Les panneaux

Les panneaux permettent d'isoler visuellement une partie de la page avec une bordure esthétique, titre, contenu et pied de panneau. Voici un exemple élémentaire :

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
  <div class="panel-footer">Pied de panneau</div>
</div>

Ce qui donne la figure suivante.

Un simple panneau
Un simple panneau

Il y a aussi des classes pour créer un sens visuel pour ces panneaux :

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>

Ce qui donne la figure suivante.

Des panneaux stylisés
Des panneaux stylisés
Utilisation avec une liste groupée

J'ai intégré une liste groupée dans un panneau au niveau de la page d'exemple :

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Les sous-espèces des tigres :</h3>
  </div>
  <div class="list-group">
    <a href="#" class="list-group-item">
      ...
    </a>
    <a href="#" class="list-group-item">
      ...
    </a>

       ...

  </div>
</div>

Ce qui donne la figure suivante.

Liste groupée dans un panneau
Liste groupée dans un panneau
Utilisation avec un tableau

J'ai intégré un tableau (sans bordure) dans un panneau au niveau de la page d'exemple :

<div class="panel panel-primary">
  <table class="table table-striped table-condensed">
    <div class="panel-heading"> 
      <h3 class="panel-title">Les menaces pour les tigres</h3>
    </div>
    <thead>
      <tr>
        <th>Lieu</th>
        <th>Menace</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Grand Mekong</td>
        <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des 
habitats du fait du développement non durable d’infrastructures</td>
      </tr>
      <tr>
        <td>Île de Sumatra</td>
        <td>Production d’huile de palme et de pâtes à papiers</td>
      </tr>
      <tr>
        <td>Indonésie et Malaisie</td>
        <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
      </tr>
      <tr>
        <td>États-Unis</td>
        <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
      </tr>
      <tr>
        <td>Europe</td>
        <td>Gros appétit pour l’huile de palme</td>
      </tr>
      <tr>
        <td>Népal</td>
        <td>Commerce illégal de produits dérivés de tigres</td>
      </tr>
    </tbody>
  </table>
</div>

Ce qui donne la figure suivante.

Tableau dans un panneau
Tableau dans un panneau

Les médias

Simple insertion

L'objet média permet d'insérer un média (audio, image, vidéo...) à gauche ou à droite d'un texte. C'est ce que j'ai prévu dans la page d'exemple avec une vidéo de tigre :

<div class="media col-lg-12">
  <div class="media-left">
    <iframe width="420" height="320" src="http://www.youtube.com/embed/VmnIeLmjuHA" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Un tigre domestique dans son canapé</h4>
    Admirez ce noble animal...
  </div>
</div>

Ce qui donne la figure suivante.

Utilisation de la classe media

La classemedia englobe l'ensemble. On utilise ensuite au choixmedia-right oumedia-left pour le média. Le corps de composant est défini par la classemedia-body et on peut mettre un titre avecmedia-heading.

Liste de médias

Une autre possibilité fort intéressante consiste à créer une liste de médias avec la classemedia-list. Prenons par exemple le cas d'un forum, on peut imaginer ce type de scénario :

<div class="container">
  <ul class="media-list col-lg-7">
    <li class="media thumbnail">
      <a class="pull-left" href="#">
        <img class="media-object" src="images/ico01.png">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Suggestion</h4>
        <p>Je pense souhaitable d'interdire la chasse au tigre pour préserver l'espèce !</p>
        <div class="media thumbnail">
          <a class="pull-left" href="#">
            <img class="media-object" src="images/ico02.png">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Animaux dangereux</h4>
            <p>Tu délires complètement, ce sont des animaux trop dangereux pour les laisser vivre.</p>
            <div class="media thumbnail">
              <a class="pull-left" href="#">
                <img class="media-object" src="images/ico01.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Quel délire !</h4>
                <p>C'est toi qui délires ! Il faut préserver la bio-diversité. Les tigres ne sont pas vraiment dangereux, c'est l'homme qui l'est !</p>
              </div>
            </div>
          </div>
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="images/ico02.png">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Quel courage !</h4>
              <p>J'aimerais te voir face à un tigre toi !</p>
            </div>
          </div>
        </div>
        <div class="media thumbnail">
          <a class="pull-left" href="#">
            <img class="media-object" src="images/ico03.png">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Un peu de calme</h4>
            <p>Je suis favorable à la préservation de l'espèce mais dans des sites protégés.</p>
            <div class="media thumbnail">
              <a class="pull-left" href="#">
                <img class="media-object" src="images/ico04.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Tu as vu ta tête !</h4>
                <p>Avec la tête que tu as tu ferais même peur à un tigre toi !</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Ce qui donne la figure suivante.

Une liste de médias

Tester

Remarquez l'utilisation de la classethumbnail pour bien isoler les commentaires et rendre le tout lisible.

Intégration de média

La version 3.2 a vu apparaître une façon très pratique pour intégrer un média en ayant un ajustement automatique des dimensions. Voici un exemple avec un ratio de 16 par 9 :

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/VmnIeLmjuHA"></iframe>
</div>

Tester

Alertes et barres de progression

Nous allons voir maintenant 2 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 les classesalert etalert-warning:

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

Ce qui donne la figure suivante.

Une simple alerte
Une simple alerte
Les 3 variantes

Trois autres classes permettent de changer l'aspect de l'alerte selon le résultat désiré :

<div class="alert col-lg-2 alert-info">
    <strong>Infos !</strong>
</div>
<div class="alert col-lg-offset-1 col-lg-2 alert-success">
    <strong>Bravo !</strong>
</div>
<div class="alert col-lg-offset-1 col-lg-2 alert-danger">
    <strong>Danger !</strong>
</div>

Ce qui donne la figure suivante.

Des alertes colorées
Des alertes colorées
Un bloc d'information

Si le texte doit être conséquent, il suffit d'écrire le code que l'on désire :

<div class="alert span5 alert-danger">
    <h3>Information importante!</h3>
    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...
</div>

Ce qui donne la figure suivante.

Une alerte plus fournie
Une alerte plus fournie
Un lien dans une alerte

La classealert-link permet d'insérer un lien esthétique dans une alerte :

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

Ce qui donne la figure suivante.

Un lien dans une alerte
Un lien dans une alerte
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 classealert-dismissable:

<div class="alert alert-warning alert-dismissable col-lg-4">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Attention!</strong> Vous allez vraiment trop loin !
</div>

Ce qui donne la figure suivante.

Un bouton pour fermer l'alerte
Un bouton pour fermer l'alerte
Utilisation dynamique

Mais évidemment 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">
  <div class="alert alert-warning col-lg-4" style="display: none">
    <button type="button" class="close">&times;</button>
      <h4>Attention!</h4> Petite information importante !
  </div>
  <div class="col-lg-3">
    <input type="button" class="btn btn-primary" id="afficher" value="Afficher l'alerte">
  </div>
</div>
<script src="assets/js/jquery.js"></script> 
<script>  
  $(function (){
    $("#afficher").click(function() {
      $("#afficher").hide();
      $(".alert").show("slow");
    }); 
    $(".close").click(function() {
      $(".alert").hide("slow");
      $("#afficher").show();
    }); 
  }); 
</script>

Ce qui donne la figure suivante.

Un bouton déclencheur
Un bouton déclencheur
Une alerte déclenchée
Une alerte déclenchée

Tester

Un bouton adapté par la classeclose 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. Les classesprogress etprogress-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 :

<div class="container">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    if(n < 100) {
      setTimeout(function() {
        timer(n + 10);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script>

Ce qui donne la figure suivante.

Barre de progression simple
Barre de progression simple

Tester

Le code correspondant à la barre est surligné, 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 classeprogress-striped:

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

Ce qui donne la figure suivante.

Barre de progression rayée
Barre de progression rayée

Tester

Il existe aussi une version rayée et élégamment animée avec la classeactive:

<div class="container">
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <div id="pourcentage" class="pull-right"></div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    $("#pourcentage").text(n + "%");
    if(n < 100) {
      setTimeout(function() {
        timer(n + 10);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script>

Ce qui donne la figure suivante, même si sur l'image vous ne voyez pas l'animation…

Barre de progression rayée et animée
Barre de progression rayée et animée

Tester

Pour changer un peu, j'ai prévu l'affichage du pourcentage. Remarquez l'utilisation de la classepull-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 :

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

Ce qui donne la figure suivante.

Des barres colorées
Des barres colorées

Tester

Une dernière possibilité, enfin, consiste à empiler des barres :

<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-success"></div>
    <div class="progress-bar progress-bar-warning"></div>
    <div class="progress-bar progress-bar-danger"></div>
  </div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    if(n < 33.2) {
      setTimeout(function() {
        timer(n + 3.33);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script>

Ce qui donne la figure suivante.

Des barres empilées
Des barres empilées

Tester

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 colorées.

  • La panneaux permettent d'isoler visuellement une partie de la page et peuvent comporter un titre, ils peuvent intégrer facilement une liste groupée ou un tableau.

  • Le composantmedia 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.

Exemple de certificat de réussite
Exemple de certificat de réussite