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
Un exemple : stackoverflow
Mise en page avec CSS pur :
- Propriétés
floatetclear - 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
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.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 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.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 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-12sur un système de 12 parts
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
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
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-xxlcol-sm-auto, …,col-xxl-autocol-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 :
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-startalign-items-centeralign-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
Alignement horizontal
Six façons d'aligner horizontalement les colonnes dans une ligne :
justify-content-startjustify-content-centerjustify-content-endjustify-content-aroundjustify-content-betweenjustify-content-evenly
Classes appliquées aux lignes, pas aux colonnes
On ne voit l'effet que si la ligne est incomplète
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.
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
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