Dr. Salhi Mounir Cours Framework de dev.

Institut Supérieur Informatique Mahdia (2022-2023)

Travaux pratique #3

FrameWork BootStrap 5

1. Création du répertoire de travail

On se propose de créer des pages html en utilisant le Framework Bootstrap

a) Télécharger le fichier suivant et placer le dans un répertoire .
https://salhi-mdb5-free-standard.mdbgo.io/maPage1.html

b) Lacer VS code et choisissez le répertoire crée dans l’étape précédente comme

répertoire de travail.

2. Intégrer Bootstrap5 à une page HTML

a. Afin de pouvoir utiliser les styles Bootstrap rajoutez dans la partie head de cette page le
code suivant :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
 1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
Ajouter une feuille de style :

Dans l’éditeur VS code ajouter le fichier «style.css » :

Question 1:
Modifiez le fichier maPage1.html pour obtenir un affichage identique à celui présenté dans la
figure ci-dessus.
a. Ajoutez les balises permettant de définir le positionnement en grille comme suit.

• Publier et vérifier
 3. Comprendre la grille Bootstrap
a. Ajouter le code CSS permettant d’avoir la feuille de style suivant :
• Les articles sont affichés sur 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.

Publier et modifier

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

https://drive.google.com/file/d/10QS_V488vEPtWwt9vI18KMeMkgXW2Ryj/view?usp=sharing

a. Créez une feuille de style permettant de partager les mêmes styles entre les deux pages
HTML.

b. Modifier le nombre de colonnes utilisées par les différents articles dans la page
«maPage2.html » pour avoir le comportement de la page décrit dans le vidéo ci-dessus.

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.
 • Publier et vérifier

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.

• Publier et vérifier
d) Sans modifier le code HTML, modifiez vos styles de manière 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).

• P
ublier et vérifier
Indication : Ajouter aux styles dans le fichier style.css la règle suivante :
/* style pour le contenu des colonnes qui sont dans une ligne imbriquée dans une ligne

le sélecteur .row .col .col peut se lire comme suit (de la droite vers la gauche) un élément
avec la classe .col qui descend (directement ou indirectement) d'un élément avec la .row
qui lui-même descend (directement ou indirectement) d'un élément avec la classe .row
*/
.row .row .col {
text-align:left;
}
• Publier et vérifier

4. Images responsives
Question 1:
a. Dans la page maPage3.html insérez entre les deux paragraphes de l'article 1
l'image isima.jpg (télécharger le fichier (cliquer ici) et placer le dans le répertoire img).
 b. Publier et vérifier

Que constatez-vous ?

c. Si on spécifie explicitement une largeur de colonne pour l'article 1 en remplaçant

<div class="col-md">
par
<div class="col-md-3">
d. Publier
e. Vérifier qu’on rétablit bien l'affichage en ligne des 3 articles, mais l'image dépasse de la
colonne de l'article 1.
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.

• Publier le site et vérifier

Question 3:
Comme indiqué sur la figure ci-dessous intégrez l'image de la chaîne des Belledonne dans
l'article 2, et l'image de Joseph Fourier dans l'article 3. Faites en sorte, qu’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.
 • Publier et vérifier

Indication
Pour l'image de Joseph Fourier la classe bootstrap .img-fluid permet de dire que la taille de
l'image s'adapte à la largeur de son conteneur (l'article). La classe .rounded-circle indique que
l'image est découpée selon une ellipse.

5. 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.
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.

Indications : Bootstrap permet de cré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.

• Publier et vérifier
Question 2:
Modifiez vos barres de navigation de manière que les items soient automatiquement remplacés
par un bouton lorsque la largeur de la fenêtre n'est pas suffisante.
 • Publier et vérifier

Indication : Il faut rajouter un bouton qui apparaitra quand la fenêtre est trop étroite et de
même englober la liste des items de la barre de navigation dans un élément div qui disparaitra
lorsque la fenêtre est trop étroite.
Pour que ces comportements fonctionnent il faut penser à intégrer le code javascript suivant de
Bootstrap (utilisés par Bootstrap) dans chaque page (maPage1.html, maPage2.html et
maPage3.html). Ceci est fait à la fin de l'élément body.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
 • Publier et vérifier

Question 3:
Modifiez vos barres de navigation de manière 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.
Publier et vérifier
Indication : Il suffit de rajouter la classe fixed-top aux styles de l'élément nav.

6. 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.
a. 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 choisissant Inspecter.

b. Dans l’inspecteur cliquer sur sources->bouton droits pour ouvrir le menu contextuel->
enregistrer sous le fichier dans le répertoire de travail.
 c. Enregistrer le fichier sous le nom de maPage4.html dans le répertoire de travail.
d. Publier le site et vérifier
e. Afficher le résultat qui doit être identique a la page suivante :
https://salhi-mdb5-free-standard.mdbgo.io/maPage4.html
f. Modifier la page dans VS code pour lui intégrer les mêmes styles que les autres pages
ainsi que la barre de navigation.
Vous devriez alors obtenir l'affichage en (a).
g. Publier et vérifier
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.
 • Publier et verifier
Indication :
Il suffit de rajouter à l'élément table la classe table et l'élément tr que l'on veut particulariser
avec une couleur de fond bleu clair la classe table-info.
Question 3:
Faites en sorte que la table réagisse aux interactions de l'utilisateur comme montré sur la
figure ci-dessus (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).

• Publier et vérifier.