R312 – TD #1

Développement front et intégration

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.

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>R312</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 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.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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

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.

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.

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é

En bref

Mise en page avec un conteneur → des lignes → des colonnes
Combiner plusieurs classes pour être responsive
Chaque classe a des versions responsives : ajoutez le -sm, …, -xxl à la fin ou au milieu