Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Correction du TP 4 : Cette page vous présente exercice par exercice une correction du TP d'initiation à Bootstrap 4. Vous pouvez aussi télécharger une version complète du code corrigé en cliquant sur ce lien TP04_BootstrapCorrection.zip.

Objectifs : L'objectif de cette scéance de TP est de découvrir le framework CSS Bootstrap (v4). Pour comprendre l'utilisation des classes CSS bootstrap utilisées dans ce TP, les liens étiquetés en vert vous renvoient vers la page correspondante dans le tutoriel de w3schools consacré à Bootstrap (https://www.w3schools.com/bootstrap4/). Les liens étiquetés en violet vous renvoient vers la documentation officielle de Bootstrap (https://getbootstrap.com/)

Ne vous trompez pas de tutorial !

  • https://www.w3schools.com/bootstrap4/ est le tutorial pour la v4 de Bootstrap. Nous travaillerons avec cette version.

  • https://www.w3schools.com/bootstrap/ est le tutorial pour la v3 de Bootstrap, version qu'il ne faut plus utiliser sauf pour des raisons de comptibilité.

1: Intégrer Bootstrap4 à une page HTML

a) Récupérez sur votre disque le fichier tp04_Bootstrap.zip, décompressez le et ouvrez (dans Netbeans ou tout autre environnement de votre choix) le fichier maPage1.html qu'il contient.

b) afin de pouvoir utiliser les styles Bootstrap rajoutez dans la partie head de cette page un lien vers un CDN avec la dernière version de BootStrap 4. Ce lien est accessible sur la page Quick Start de la documentation Bootstrap. Copiez le et collez le dans la partie <head> de votre page.

récupérer le lien vers les styles Bootstrap
récupérer le lien vers les styles Bootstrap

c) verifiez que vous obtenez bien l'affichage suivant:

maPage1.html avec les styles par défaut Bootstrap
maPage1.html avec les styles par défaut Bootstrap.
Solution

2: Comprendre la grille Bootstrap

On souhaite avoir un affichage responsif s'adaptant automatiquement à la taille de la fenêtre du navigateur et se comportant comme suit:

  • Les articles sont affichés sur un un fond de couleur bisque avec des bords arrondis (border-radius). Le texte des articles est placé avec une marge interne (padding) de 10 pixels.
  • Si la largeur de la fenêtre est plus grande ou égale à 768 pixels , les trois articles sont placés sur une même ligne et occupent une largeur identique.
  • Les sections sont affichées sur un un fond de couleur lavender avec des bords arrondis (border-radius). Le texte des sections est placé avec une marge interne (padding) de 10 pixels.
  • Si la fenêtre fait moins de 768 pixels de large, les sections sont placées les unes au dessous des autres, un espace de 10 pixels séparant les articles.
Affichage responsif de maPage.html
Affichage responsif de maPage1.html.

Question 1: modifiez le fichier maPage1.html pour obtenir un affichage identique à celui présenté dans la figure ci-dessus.

Solution

Question 2: Faire une copie du fichier maPage1.html vers maPage2.html et modifier celui-ci de sorte que (voir vidéo ci-dessous):

  • lorsque la largeur de la fenêtre est supérieure à 768px, les articles occupent respectivement 25%, 50% et 25% de la largeur de la fenêtre.
  • le reste du comportement des articles et sections demeure inchangé.

Solution

Question 3:

a) Faire une copie du fichier maPage2.html vers maPage3.html.

b) Découper en trois paragraphes le premier paragraphe de l'article 2.

Affichage responsif de maPage.html
Découpage en paragraphes de l'article 2 de maPage3.html.
Solution

c) Modifier maPage3.html de façon à ce que les trois premiers paragraphes de Article 2 s'affichent en colonnes quelle que soit la largeur de la fenêtre.

Affichage responsif de maPage3.html
Affichage en colonnes des 3 premiers paragraphes de l'article 2 de maPage3.html.

Solution

Bootstrap permet l'imbrication (nesting) de grilles, voir la documentation officielle de Bootstrap sur les grilles : Nesting

d) Sans modifier le code HTML, modifiez vos styles de manière à ce que ces trois paragraphes ne soient pas justifiés (il est donc interdit de modifier les balises <p> concernées en leur rajoutant une classe de style).

Affichage responsif de maPage3.html
Le texte des paragraphes en colonne n'est pas justifié.
Solution

3. Images responsives

Question 1: dans la page maPage3.html insérez entre les deux paragraphes de l'article 1 l'image 700px-Campus_de_Grenoble.jpg (elle se trouve dans le répertoire images de votre répertoire TP04-Bootstrap).

insertion d'une image maPage3.html
Insertion d'une image dans l'article 3.

Réaffichez la page. Que constatez vous ?

Solution

Question 2: en utilisant les styles de Bootstrap faites en sorte que la taille de l'image s'adapte automatiquement à celle de son conteneur comme montré sur la vidéo ci-dessous.


Solution

  • La documentation officielle de Bootstrap sur les images : Images
  • Le tutorial de w3schools sur les images: Bootstrap 4 images

Question 3: comme indiqué sur la figure ci-dessous intégrez l'image de la chaîne des Belledonnes dans l'article 2, et l'image de Joseph Fourier dans l'article 3. Faites en sorte, que en plus d'adapter automatiquement leur taille à celle de leur conteneur, ces images aient respectivement un effet de vignette pour les deux premières et un découpage circulaire pour la troisième.

insertion d'une image maPage3.html
Insertion d'images dans les articles 2 et 3.

Solution

4. Barre de navigation

On souhaite maintenant doter les pages du site d'une barre de navigation permettant de passer rapidement d'une page du site à une autre comme le montre la vidéo ci-dessous.


Question 1: ajoutez à vos pages d'une barre de navigation, en respectant les contraintes suivantes:

  • barre de navigation noire avec texte blanc,
  • l'item correspondant à la page active est en blanc, les autres items sont en gris,
  • lorsque la souris est déplacée au dessus d'un item autre que celui de la page active, sa couleur s'éclaircit,
  • lorsque la fenêtre n'est pas assez large pour tous les afficher en ligne, les items s'empilent les uns au dessus des autres.
barre de navigation
Barre de navigation.

Solution

Bootstrap permet de géréer très facilement des barres de navigation en utilisant les éléments HTML <nav>, <ul> et <li> et en les stylant de manière appropriée.

Pour en savoir plus:

Très souvent, on préférera sur des écrans très petits remplacer les liens de navigation par un bouton qui ne les fera apparaître que lorsque l'on clique dessus, comme le montre la vidéo ci-dessous.


Question 2: modifiez vos barres de navigation de manière à ce que les items soient automatiquement remplacés par un bouton lorsque la largeur de la fenêtre n'est pas suffisante.

barre de navigation
Navigation avec un bouton lorsque la fenêtre est trop étroite.

Solution

La encore bootstrap offre tout ce qu'il faut pour réaliser facilement cet effet.

Pour en savoir plus:

  • Dans la documentation officielle de Bootstrap 4 sur les barres de navigation: Responsive behaviors
  • Dans tutorial de w3schools sur les barres de navigation, allez à la section Collapsing The Navigation Bar: Navigation Bars

danger Pour que le bouton soit pleinement fonctionnel, pensez à intégrer les composants JavaScript de JQuery, Poppers et Bootstrap dans vos pages. Pour inclure ces scripts, reportez-vous à la section qui leur est consacrée dans la page d'accueil de la documentation Bootstrap.

Question 3: modifiez vos barres de navigation de manière à ce qu'elles restent fixes en haut de la fenêtre du navigateur même lorsque l'utilisateur effectue un défilement vertical (scroll) dans la page.


Solution

5. Tables

Dans cet exercice vous allez utiliser bootstrap pour mettre en forme facilement une table HTML.

Question 1: rajoutez la page maPage4.html à votre site.

  1. Téléchargez la page et enregistrez la dans votre site (en effectuant par exemple un clic droit sur le lien ci-dessus et en choissant 'Enregistrer la cible du lien sous' dans le menu contextuel (Firefox)).

  2. Modifier la page pour lui intégrer les mêmes styles que les autres pages ainsi que la barre de navigation.

Vous devriez alors obtenir l'affichage suivant :

table avec les styles bootstrap par défaut
table avec les styles bootstrap par défaut

Question 2: en utilisant les styles css faites en sorte que la table s'affiche comme indiqué ci-dessous. Dans la mesure du possible, utilisez au maximum les styles proposés par Bootstrap pour la mise en forme des tables.

table mise en forme avec les styles bootstrap
table mise en forme avec les styles Bootstrap

Solution

Cet exercice à pour but de vous apprendre à chercher par vous même dans les tutoriaux de w3schools et dans la documentation de Bootstrap4. Sachez que les effets demandés (dans cet exercice et le suivant) peuvent être entièrement obtenus par les styles prédéfinis de Bootstrap. Le seul style que vous devriez être amenés à définir concerne le centrage du texte dans les cellules du tableau.

Question 3: Faites en sorte que la table réagisse aux interactions de l'utilisateur comme montré sur la vidéo ci-dessous (mise en évidence de la ligne sous le curseur de la souris, ajout d'une barre de défilement (scrolling) horizontale lorsque la fenêtre est trop étroite pour afficher toute la table).


Solution