M3206 — TD #1

Intégration multimédia S3


Mise en page

Mise en page : découper le contenu en blocs rectangulaires et les arranger sur la fenêtre

Illustration du mockup d'une page web. Credit to https://perzonseo.com

Un exemple : stackoverflow

Mise en page avec CSS pur :

  • Propriétés float et clear
  • Module CSS Flexible Box Layout (Flexbox)
  • Module CSS Grid Layout

Les frameworks front-end permettent de faire une mise en page sans utiliser directement ces techniques

Bootstrap utilise des requêtes média et le module CSS Flexbox.

Le framework Bootstrap permet de faire une mise en page responsive facilement, qui s'adapte à la taille de l'écran.

Autres frameworks front-end ici.

La grille (statique)

Bootstrap propose un système de grille pour faire la mise en page :

  • Un conteneur (container) qui contient
  • des lignes (rows), chacune avec
  • des colonnes

See the Pen Exemple de grille avec Bootstrap by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Un exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    div { border: 1px solid black; }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col">Ligne 1, colonne 1</div>
      <div class="col">Ligne 1, colonne 2</div>
    </div>
    <div class="row">
      <div class="col">Ligne 2, colonne 1</div>
      <div class="col">Ligne 2, colonne 2</div>
      <div class="col">Ligne 2, colonne 3</div>
    </div>
    <div class="row">
      <div class="col">Ligne 3, colonne 1</div>
      <div class="col">Ligne 3, colonne 2</div>
      <div class="col">Ligne 3, colonne 3</div>
      <div class="col">Ligne 3, colonne 4</div>
    </div>
  </div><!-- .container -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Quatre choses à remarquer : le viewport, le conteneur, les lignes et les colonnes.

Le viewport

Toujours ajouter cette ligne dans le head :

<meta name="viewport" content="width=device-width, initial-scale=1">

Ça évite des problèmes de taille sur les petits écrans

Pour plus d'information sur le viewport, lisez ceci.

Le conteneur

Toute la grille est contenue dans le conteneur : un élément div avec la classe container ou container-fluid.


<div class="container">...</div>
<div class="container-fluid">...</div>
					
container
la largeur est fixe, mais elle s'adapte à l'écran
container-fluid
la largeur occupe tout l'écran

Les lignes

On découpe la mise en page en lignes : un élément div avec la classe row.


<div class="row">
   ...
</div>
          

Sa largeur est celle du conteneur. Sa hauteur est celle de son contenu.

Les colonnes

Chaque ligne est divisée en colonnes. Plusieurs façons de régler sa largeur :

  • Largeur partagée équitablement avec la classe col
  • Largeur de son contenu avec la classe col-auto
  • Largeur fixe avec les classes col-1, …, col-12 sur un système de 12 parts

See the Pen Largeur des colonnes by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exercice 1

Première mise en page : énoncé

La grille (responsive)

Objectif : avec le même code HTML, faire plusieurs mises en page différentes.

Illustration de plusieurs mise en page différentes adaptées à la largeur de l'écran.

Mobile first

Bootstrap utilise l'approche mobile-first : la page web est conçue pour être affichée sur un écran de téléphone par défaut.

Ensuite, on dit comment la page web doit s'adapter aux écrans de plus en plus larges.

Rappel sur les requêtes média

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Points de rupture

Boostrap définit 5 points de rupture (breakpoints) pour ses requêtes média :

  • small (sm) : 576 px
  • medium (md) : 768 px
  • large (lg) : 992 px
  • extra large (xl) : 1200 px
  • extra extra large (xxl) : 1400 px

Nous pouvons changer la mise en page à chaque point de rupture.

Chaque classe pour les colonnes a une version responsive, qui se déclenche à partir de son point de rupture :

  • col-sm, col-md, col-lg, col-xl, col-xxl
  • col-sm-auto, …, col-xxl-auto
  • col-sm-4, …, col-xxl-8

En plus de la classe par défaut (sans point de rupture), nous appliquons d'autres classes sur une même colonne.

Exemple :

See the Pen Mise en page responsive by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Priorité pour le plus grand point de rupture déclenché.

Exercice 2

Mise en page responsive : énoncé

Lignes incomplètes / débordantes

Dans les exemples précédents, la somme des parts dans chaque ligne faisait 12 parts.

  • Si la somme est < 12, les colonnes sont calées par défaut à gauche.
  • Si la somme est > 12, les colonnes "en trop" passent à la ligne suivante.

Exercice 3

Lignes incomplètes et débordantes : énoncé

Plus d'options

Alignement vertical

Trois façons d'aligner verticalement les colonnes dans une ligne :

  • align-items-start
  • align-items-center
  • align-items-end

Ces classes s'appliquent aux lignes, pas aux colonnes.

Il est aussi possible d'aligner chaque colonne individuellement [doc]

On ne voit l'effet des ces classes que si toutes les colonnes n'ont pas la même hauteur

See the Pen Alignement vertical des colonnes by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Alignement horizontal

Six façons d'aligner horizontalement les colonnes dans une ligne :

  • justify-content-start
  • justify-content-center
  • justify-content-end
  • justify-content-around
  • justify-content-between
  • justify-content-evenly

Classes appliquées aux lignes, pas aux colonnes.

On ne voit l'effet que si la ligne est incomplète

See the Pen Alignement horizontal des colonnes by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exercice #4

Classes pour l'alignement : énoncé

Colonnes décalées

Pour laisser de l'espace à gauche d'une colonne, il existe les classes offset-1, …, offset-11. Elles sont appliquées sur la colonne.

Donc pas besoin d'ajouter des colonnes vides.

Les versions responsives sont : offset-sm-1, …, offset-xxl-11.

Voir toutes les classes ici.

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Pour mettre tout l'espace disponible à gauche, il y a la classe ms-auto (margin start). Pour le mettre à droit, me-auto (margin end).

Versions responsives : ms-sm-auto, …, me-xxl-auto

Exercice #5

Mise en page dynamique avec décalage entre les colonnes : énoncé

Ordonner les colonnes

Les classes .order-X réordonnent les colonnes en fonction de l'index X (au lieu de leur ordre dans le HTML).

Versions responsives : order-sm-1, …, order-xxl-6

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exercice #6

Colonnes reordonnées : énoncé

Conclusion

  • Mise en page avec un conteneur → des lignes → des colonnes
  • Combiner plusieurs classes pour être responsive
  • Chaque classe à des versions responsives : ajoutez le -sm, …, -xxl à la fin ou au milieu
  • Vous venez d'apprendre 209 classes !

La suite

Dans les TPs suivants, nous exploiterons au maximum toutes les possibilités de la grille