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 !

Un peu de pratique

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

Nous avons vu en détail les possibilités de la grille de Bootstrap. Nous avons vu également comment faire des mises en pages adaptées à différents types de supports. Il est temps maintenant de mettre en application toutes ces connaissances avec des applications pratiques.

Vous trouverez ici les images qui vous permettront de construire les exemples ci-dessous.

Combiner les formats et exemple de page

Nous allons maintenant utiliser ce que nous avons vu dans les chapitres précédents pour construire une page pratique.

Combinaison de classes « col-* »

Nous avons vu des mises en page utilisant sélectivement les classes pour les colonnes prévues pour les différents formats de supports. Nous allons à présent envisager leur combinaison pour gérer certains cas. Dans la page à réaliser, je veux avoir des petites photos côte à côte. Supposons que je parte de cette structure pour cette partie de la page :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      body { margin-top: 10px; }
    </style>
  </head>

  <body>

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

  </body>
</html>

Le rendu sur grand écran est parfait avec 6 photos sur la largeur (voir figure suivante).

Affichage sur grand écran
Affichage sur grand écran

Mais ça se gâte quand je rétrécis la fenêtre, puisque je sais qu'en dessous de 1200 pixels les éléments s'empilent. Du coup je me retrouve avec une image sur la largeur, et comme je les ai prévues en basse résolution, elle pixellise, comme à la figure suivante.

Affichage au-dessous de 1200 pixels
Affichage au-dessous de 1200 pixels

L'idéal serait d'avoir :

  • Sur moyen et grand écran : 6 images sur la largeur.

  • Sur tablette : 4 images sur la largeur.

  • Sur smartphone : 3 images sur la largeur.

Comment réaliser cela ? Tout simplement en combinant les classescol-* :

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

Je vais avoir ainsi :

  • Sur un écran de plus de 992 pixels de large : classescol-md-2 actives.

  • Sur un écran entre 768 et 992 pixels de large : classescol-sm-3 actives.

  • Sur un écran de moins de 768 pixels de large : classescol-xs-4 actives.

Et voici à la figure suivante le résultat sur écran moyen (classescol-sm-3 actives).

Affichage sur écran moyen
Affichage sur écran moyen

Et à la figure suivante, le résultat sur petit écran (classescol-xs-4 actives).

Affichage sur petit écran
Affichage sur petit écran

J'ai donc obtenu facilement une adaptation de la présentation de mes photos en fonction du support utilisé pour les visualiser.

Page d'exemple

Construisons maintenant une page complète qui intègre la partie que nous venons de traiter :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
  </head>

  <body>
    <div class="container">
      <header class="page-header">
        <h1>Mon amour pour les tigres</h1>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
            Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. 
Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde. 
L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur, 
il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles. 
Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède 
un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
            <small class="pull-right">Wikipedia</small><br>
          </blockquote>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
      </section>
      <section class="row">
        <aside class="col-sm-4">
          <address>
            <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>
        </aside>
        <div class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </div>
      </section>
    </div>
  </body>
</html>

Voici à la figure suivante le résultat obtenu.

La page d'exemple
La page d'exemple

Une simple composition avec un en-tête et 3 rangées. L'en-tête ne comporte que le titre avec une classe un peu particulière que nous allons voir plus loin. La première rangée comporte un seul élément. La deuxième en revanche en comporte 12 et correspond à ce que nous avons vu précédemment. Voici à la figure suivante une visualisation du découpage.

La page d'exemple décryptée
La page d'exemple décryptée
La classe page-header

Cette classe fixe quelques valeurs :

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

Une marge haute de 40 pixels et basse de 20 pixels. Une ligne inférieure de 1 pixel de couleur grise, avec un écart de 9 pixels entre le contenu et cette ligne. Donc une approche sympathique pour un en-tête de page. Il suffit d'y placer un titre comme je l'ai fait ici :

<header class="page-header">
   <h1>Mon amour pour les tigres</h1>
</header>

Voici le résultat à la figure suivante.

La classe « page-header »
La classe « page-header »
Quelques mises en valeur

Dans le premier paragraphe, j'ai utilisé quelques mises en valeur :

<p>Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
      Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>

Observez à la figure suivante la qualité du popup lorsque l'on passe le curseur au-dessus de l'abréviation SAT.

Apparence d'une abréviation
Apparence d'une abréviation
Une citation

Le chapitre suivant comporte une citation avec utilisation de la baliseblockquote:

<blockquote>Le Tigre (Panthera tigris) est un mammifère carnivore...<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>

Le résultat est sobre et élégant (voir figure suivante).

Apparence d'une citation
Apparence d'une citation

La référence inférieure « Wikipedia » a été renvoyée à droite avec la classepull-right qui se contente de rendre flottant à droite :

.pull-right {
  float: right !important;
}
Une adresse

Dans la partie inférieure gauche figure une adresse. J'ai simplement utilisé la balise<address> :

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

Pour un résultat satisfaisant, visible à la figure suivante.

Apparence d'une adresse
Apparence d'une adresse
Juste un peu de style ajouté

Pour donner plus d'harmonie à cette page, j'ai dû ajouter une marge basse de 20px à tous lescol et j'ai obligé les images à occuper tout l'espace disponible :

[class*="col"] { 
   margin-bottom: 20px;
}
img {
   width: 100%;
}

C'est le seul élément de style ajouté à cette page.

Cas pratiques et classes « responsive »

Maintenant, vous avez tous les éléments en main pour construire des pages ! Je vous propose donc quelques exercices pratiques pour vous entraîner.

Exercice 1

Le but est d'obtenir une mise en page pour grand écran identique à celle de la figure suivante.

Résultat à obtenir
Résultat à obtenir

Réfléchissez un peu avant de regarder la solution.

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-8 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-lg-2">
          <div class="row">
            <aside class="col-lg-12">
              Aside
            </aside>
            <aside class="col-lg-12">
              Aside
            </aside>
          </div>
        </div>

        <section class="col-lg-8">
          Section
        </section>

        <div class="col-lg-2">
          <div class="row">
            <aside class="col-lg-12">
              Aside
            </aside>
            <aside class="col-lg-12">
              Aside
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>

Maintenant la question à se poser est : comment va réagir cette structure quand on va réduire la fenêtre ? Comme j'ai mis des classescol-lg-*, tout va s'empiler sous 1200 pixels. Si cet effet me convient, c'est parfait. Mais supposons que, sur tablette je veuille une structure similaire à celle de la figure suivante.

Affichage désiré sur tablette
Affichage désiré sur tablette

Comment procéder ? Voici une solution :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-md-8, .col-sm-10 { line-height: 200px; }
    .col-md-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-md-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-sm-2">
          <div class="row">
            <aside class="col-md-12">
              Aside 1
            </aside>
            <aside class="col-md-12">
              Aside 2
            </aside>
          </div>
        </div>

        <section class="col-sm-10 col-md-8">
          Section
        </section>

        <div class="clearfix visible-sm-block"></div>
        
        <div class="col-md-2">
          <div class="row">
            <aside class="col-md-12">
              Aside 3
            </aside>
            <aside class="col-md-12">
              Aside 4
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-md-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>

J'ai remplacé les classescol-lg-* par des classescol-md-* pour avoir un comportement de base pour écrans moyens et grands. J'ai ensuite introduit des classescol-sm-* pour avoir le comportement désiré sur tablette. En revanche, la ligne 38 mérite quelques commentaires particuliers. Pour le média tablette, vous avez des éléments flottants qui se succèdent avec des comportements qui ne sont pas forcément ceux que l'on souhaite. La figure suivante vous montre le résultat sans cette ligne de code.

Résultat sans la classe « clearfix »
Résultat sans la classe « clearfix »

Que fait cette classeclearfix ? Elle réinitialise les éléments flottants qui suivent pour les ramener dans le flux normal, et éviter qu'ils viennent recouvrir les éléments précédents. Nous allons voir maintenant la classe visible-sm

Les classes « responsives »

Pour poursuivre l’exercice précédent, il faut d'abord évoquer quelques classes très utiles qui vont nous permettre non plus de positionner différemment les éléments, mais carrément de les faire disparaître ou apparaître . Vous trouverez un tableau très bien fait dans la documentation, visible à la figure suivante.

Les classes responsives

Les classes de visibilité se déclinent en trois sortes selon le type de visualisation :

Les classe de visibilité
Les classes de visibilité

Nous avons déjà utilisé une de ces classes. Continuons à en utiliser pour poursuivre notre exercice en supprimant 2asides pour les smartphones :

Affichage désiré sur smartphone
Affichage désiré sur smartphone

Il suffit de changer une ligne, la ligne 40 :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-md-8, .col-sm-10 { line-height: 200px; }
    .col-md-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-md-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-sm-2">
          <div class="row">
            <aside class="col-md-12">
              Aside
            </aside>
            <aside class="col-md-12">
              Aside
            </aside>
          </div>
        </div>

        <section class="col-sm-10 col-md-8">
          Section
        </section>

        <div class="clearfix visible-sm-block"></div>

        <div class="hidden-xs col-md-2">
          <div class="row">
            <aside class="col-md-12">
              Aside
            </aside>
            <aside class="col-md-12">
              Aside
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-md-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>

Exercice 2

Voyons maintenant un autre cas. Je veux obtenir le résultat visible à la figure suivante.

Résultat à obtenir
Résultat à obtenir

Donc une entête qui prend toute la largeur de l'écran, une navigation à gauche, deux sections accolées et un pied de page, le tout pour grand écran. Voici une solution :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>

    <header>
      <div class="col-lg-12">
        Entete
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-lg-2">
            Navigation
        </nav>

        <section class="col-lg-5">
          Section
        </section>
        <section class="col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>   

    </div>

  </body>
</html>

Maintenant je me dis que mon application serait bien aussi sur écran moyen. Si je ne fais rien, j'obtiens le résultat visible à la figure suivante.

Résultat sur écran moyen
Résultat sur écran moyen

Ça ne me plaît pas trop, j'aimerais que les 2 sections restent accolées, comme à la figure suivante.

Résultat désiré sur écran moyen
Résultat désiré sur écran moyen

Voici une solution :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>


    <header>
      <div class="col-lg-12">
        Entete
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-md-12 col-lg-2">
            Navigation
        </nav>

        <section class="col-md-6 col-lg-5">
          Section
        </section>
        <section class="col-md-6 col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>  

    </div>

  </body>
</html>

Après réflexion, je me dis que mon application irait bien aussi sur tablette, l'empilement des éléments me convient, mais j'aimerais avoir une en-tête différente. Après une nouvelle réflexion, j'en veux aussi une différente sur smartphone. Avec les classes « responsives » vues précédemment, c'est facile à réaliser :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>


    <header>
      <div class="visible-lg col-lg-12">
        Entete large
      </div>
      <div class="visible-md col-lg-12">
        Entete moyenne
      </div>
      <div class="visible-sm col-lg-12">
        Entete tablette
      </div>
      <div class="visible-xs col-lg-12">
        Entete smartphone
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-md-12 col-lg-2">
            Navigation
        </nav>

        <section class="col-md-6 col-lg-5">
          Section
        </section>
        <section class="col-md-6 col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>  

    </div>

  </body>
</html>

En résumé

  • Il est possible avec la grille de régler très finement le rendu des pages selon les supports de visualisation.

  • La plupart des éléments typographiques du HTML trouvent automatiquement une mise en forme esthétique avec Bootstrap.

  • On a vu sur des exemples pratiques qu'il est facile de faire des mises en page même complexes sans trop d'effort.

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