Intégration multimédia S3 (M3206) – TP n° 4

Dans cette dernière séance de TP dédiée à la grille Bootstrap, vous allez pratiquer comment faire des mises en page complexes avec des grilles imbriquées.

Dans la deuxième partie vous apprendrez à changer l'ordre des colonnes pour rendre votre mise en page plus flexible.

Avant de commencer, créez un répertoire nommé m3206-tp4 contenant des répertoires exo1, exo2, etc. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire m3206-tp4 et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués.

Grilles complexes avec Bootstrap

Souvenez vous qu'on peut faire des mises en page complexes en imbriquant les grilles. Une colonne (<div class="col">) peut contenir une ligne (<div class="row">). Et chaque ligne doit contenir une colonne.

Voici un exemple de grille imbriquée, suivi du résultat.

<div class="row">
  <div class="col-4" style="height: 100px; background-color: hsl(190, 50%, 50%);"></div>
  <div class="col-8">
    <div class="row">
      <div class="col-12" style="height: 40px; background-color: hsl(20, 50%, 50%);"></div>
      <div class="col-12" style="height: 60px; background-color: hsl(90, 50%, 50%);"></div>
    </div>
  </div>
</div>

Exercice 1

Dans cet exercice vous allez faire une grille complexe avec Bootstrap.

Faites la grille (non responsive) suivante.

Grille à faire pour l'exercice 1. — Écran moyen

Utilisez les règles CSS suivantes pour définir la hauteur et la couleur de fond de chaque bloc :

.ha { height:  25px; background-color: hsl(200, 50%, 50%); }
.hb { height:  75px; background-color: hsl( 50, 50%, 50%); }
.hc { height: 350px; background-color: hsl(100, 50%, 50%); }
.hd { height:  50px; background-color: hsl(150, 50%, 50%); }
.he { height: 125px; background-color: hsl( 10, 50%, 50%); }
.hf { height:  50px; background-color: hsl(300, 50%, 50%); }
.hg { height: 175px; background-color: hsl( 70, 50%, 50%); }
.hh { height:  25px; background-color: hsl(200, 50%, 50%); }
.hi { height:  50px; background-color: hsl(300, 50%, 50%); }
.hj { height: 175px; background-color: hsl( 20, 50%, 50%); }
.hk { height:  25px; background-color: hsl( 40, 50%, 50%); }
.hl { height: 150px; background-color: hsl(140, 50%, 50%); }
.hm { height: 100px; background-color: hsl(300, 50%, 50%); }
.hn { height:  25px; background-color: hsl(200, 50%, 50%); }

Vous pouvez calculer la largeur des colonnes au pif, ou avec un logiciel de traitement d'images (GIMP, Photoshop).

Exercice 2*

Dans cet exercice vous allez rendre la grille de l'exercice 1 responsive.

La grille précédente s'appliquera aux écrans moyens ou plus grands. Pour les écrans très petits et petits vous devez faire ces grilles :

Grille à faire pour l'exercice 2. — Écran très petit

Utilisez les règles CSS suivantes pour définir la hauteur et la couleur de fond de chaque bloc :

.ha { height:  25px; background-color: hsl(200, 50%, 50%); }
.hb { height: 100px; background-color: hsl( 50, 50%, 50%); }
.hc { height: 100px; background-color: hsl(100, 50%, 50%); }
.hd { height:  50px; background-color: hsl(150, 50%, 50%); }
.he { height:  75px; background-color: hsl( 10, 50%, 50%); }
.hf { height:  25px; background-color: hsl(300, 50%, 50%); }
.hg { height: 125px; background-color: hsl( 70, 50%, 50%); }
.hh { height:  25px; background-color: hsl(200, 50%, 50%); }
.hi { height:  50px; background-color: hsl(300, 50%, 50%); }
.hj { height: 125px; background-color: hsl( 20, 50%, 50%); }
.hk { height:  25px; background-color: hsl( 40, 50%, 50%); }
.hl { height: 100px; background-color: hsl(140, 50%, 50%); }
.hm { height:  75px; background-color: hsl(300, 50%, 50%); }
.hn { height:  25px; background-color: hsl(200, 50%, 50%); }
@media (min-width: 576px) {
  .hb { height:  75px; }
  .hc { height: 525px; }
  .hj { height: 150px; }
  .hl { height: 125px; }
}
@media (min-width: 768px) {
  .hc { height: 350px; }
  .he { height: 125px; }
  .hf { height:  50px; }
  .hg { height: 175px; }
  .hj { height: 175px; }
  .hl { height: 150px; }
  .hm { height: 100px; }
}

Changer l'ordre des colonnes

Dans chaque ligne d'une grille, les colonnes s'affichent (de gauche à droite) dans le même ordre que dans le fichier HTML. Bootstrap permet de changer cet ordre.

Les classes order-X (c'est-à-dire, order-1, order-2, ... order-12) réordonnent les colonnes en fonction de l'index X.

Évitez de mélanger les colonnes sans et avec classes order-* dans la même ligne. En tout cas, sachez que les colonnes sans classe order-* vont s'afficher avant (à gauche).

Comme d'habitude, elles ont de versions avec les points de rupture : order-sm-X, order-md-X, order-lg-X et order-xl-X.

Exercice 3

Ajoutez des classes de Bootstrap dans cet exemple pour que les blocs soient affichés dans l'ordre inverse : 5 4 3...

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206-TP4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    [class*="col"] {
      background-color: rgba(86, 61, 124, .15);
      border: 1px solid rgba(86, 61, 124, .2);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        1
      </div>
      <div class="col">
        2
      </div>
      <div class="col">
        3
      </div>
      <div class="col">
        4
      </div>
      <div class="col">
        5
      </div>
    </div>
  </div>
  <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>
</body>
</html>

Exercice 4

Dans cet exercice vous allez utiliser les classes pour réordonner les colonnes avec les points de rupture.

Faites une grille avec 1 ligne et 3 colonnes telle que :

Pour un petit écran, les colonnes contiennent les textes "A", "B" et "C", respectivement
Pour un écran moyen, les colonnes contiennent les textes "B", "C" et "A", respectivement
Pour un écran très grand, les colonnes contiennent les textes "C", "A" et "B", respectivement

Mises en page avancées

Jusqu'à maintenant vous savez faire des grilles dont la largeur des colonnes peut varier avec la largeur de l'écran. Vous savez vous en servir pour changer la mise en page selon la taille de l'écran (voir l'exercice 5 du TP #2). Ensuite vous avez appris à faire des grilles imbriquées pour aller plus loin.

Maintenant, avec les classes pour réordonner les colonnes, vous pouvez aller plus loin. Voici un exemple intéressant de grille responsive où l'on change l'ordre de colonnes.

<div class="row">
  <div class="col-6 order-2 col-md-3 order-md-1" style="height: 40px; background-color: hsl(190, 50%, 50%);">A</div>
  <div class="col-12 order-1 col-md-6 order-md-2" style="height: 40px; background-color: hsl(20, 50%, 50%);">B</div>
  <div class="col-6 order-3 col-md-3 order-md-3" style="height: 40px; background-color: hsl(90, 50%, 50%);">C</div>
</div>

La colonne «B» se trouve au milieu pour les écrans moyens, et en haut pour les écrans plus petits.

En effet, on peut bouger les blocs dans une grille dynamique avec les classes order-*.

Exercice 5

Dans cet exercice vous allez faire une grille avec Bootstrap où vous aurez besoin des classes order-*.

Faites la grille dynamique suivante.

Grille à faire pour l'exercice 3. — Écran très petit

Les règles CSS :

.ha { height:  50px; background-color: hsl(350, 50%, 50%); }
.hb { height:  50px; background-color: hsl( 50, 50%, 50%); }
.hc { height:  25px; background-color: hsl(100, 50%, 50%); }
.hd { height:  25px; background-color: hsl(200, 50%, 50%); }
.he { height:  25px; background-color: hsl(100, 50%, 50%); }
.hf { height:  25px; background-color: hsl(200, 50%, 50%); }
.hg { height: 100px; background-color: hsl(300, 50%, 50%); }
.hh { height:  25px; background-color: hsl( 50, 50%, 50%); }
.hi { height:  50px; background-color: hsl(150, 50%, 50%); }
.hj { height:  50px; background-color: hsl(150, 50%, 50%); }
.hk { height:  25px; background-color: hsl( 50, 50%, 50%); }
.hl { height:  50px; background-color: hsl(350, 50%, 50%); }
@media (min-width: 768px) {
  .ha { height:  25px; }
  .hb { height:  25px; }
  .hg { height:  50px; }
  .hi { height:  75px; }
  .hj { height:  75px; }
}

Faites attention à comment vous structurez votre grille pour pouvoir y arriver.

Exercice 6*

Le but de cet exercice est le même : faire une grille complexe et responsive avec les classes .order-*.

Vous devez faire la grille suivante.

Grille à faire pour l'exercice 4. — Écran très petit

Les règles CSS :

.ha { height: 50px; background-color: hsl(100, 50%, 50%); }
.hb { height: 50px; background-color: hsl(100, 50%, 70%); }
.hc { height: 75px; background-color: hsl(  0, 50%, 50%); }
.hd { height: 50px; background-color: hsl(100, 60%, 40%); }
.he { height: 50px; background-color: hsl(100, 50%, 50%); }
.hf { height: 75px; background-color: hsl(200, 50%, 50%); }
.hg { height: 75px; background-color: hsl(200, 60%, 40%); }
.hh { height: 50px; background-color: hsl(200, 50%, 70%); }
.hi { height: 50px; background-color: hsl(200, 50%, 50%); }
.hj { height: 75px; background-color: hsl(  0, 50%, 50%); }
@media (min-width: 768px) {
  .hc { height: 100px; }
  .hh { height:  75px; }
  .hi { height:  75px; }
  .hj { height: 150px; }
}