Bootstrap permet de faire une mise en page responsive facilement, qui s'adapte à la taille de l'écran.
Pour cela, Bootstrap utilise de requêtes de média et le module CSS Flexbox.
Bootstrap utilise une 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 plus grands.
Il faut ajouter cette ligne dans le head :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
On écrit le code HTML dans un conteneur : un élément div avec la classe container ou container-fluid.
<div class="container">...</div>
<div class="container-fluid">...</div>
Boostrap définit 4 points de rupture (breakpoints) pour les requêtes de média (media-queries) :
Mise en page avec une grille : chaque conteneur contient de lignes qui elles-mêmes contiennent des colonnes qui définissent des blocs de contenu.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style>
div {
border: 1px solid black;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
La grille est basée sur 12 colonnes par ligne. On définit la largeur d'une colonne avec les classes .col-1, .col-2, ... .col-12.
Si on ne dit pas la taille (.col), la largeur est calculée en fonction de l'espace disponible.
Aussi, on peut adapter la largeur de la colonne en fonction du contenu avec la classe .col-auto
Faire une grille en Bootstrap qui contient :
Ajoutez du texte dans chaque colonne. Utilisez la règle CSS div { border: 1px solid black; } pour bien voir les colonnes.
Le fichier doit s'appeler m3206-td2/exo1/index.html
On fait varier la largeur d'une colonne en fonction de la taille de l'écran avec les classes .col-sm-X, .col-md-X, .col-lg-X, et .col-xl-X, où X est un entier entre 1 et 12.
.col-sm-X : écran petit (≥ 576 px) ou plus.col-md-X : écran moyen (≥ 768 px) ou plus.col-lg-X : écran grand (≥ 992 px) ou plus.col-xl-X : écran très grand (≥ 1200 px) ou plusS'il n'y a pas de point de rupture, la taille de la colonne s'applique à tous les écrans.
Faire une grille en Bootstrap qui contient :
Dans les exemples précédents, la somme des colonnes dans chaque colonne faisait 12.
Si la somme est < 12, les colonnes sont calées par défaut à gauche.
Par contre, si la somme des colonnes est plus grande que 12, alors les colonnes "en trop" passent à la ligne suivante.
Modifier l'exercice #1 pour avoir une ligne normale, une ligne incomplète et une ligne débordante.
Il y a 3 façons d'aligner verticalement les colonnes dans une ligne :
.align-items-start.align-items-center.align-items-endCes trois classes s'appliquent aux lignes.
Il y a 5 façons d'aligner horizontalement les colonnes dans une ligne (s'il y a de la place) :
.justify-content-start.justify-content-center.justify-content-end.justify-content-around.justify-content-betweenCes trois classes s'appliquent aux lignes.
Faire une grille qui utilise tous les types d'alignements possibles.
Ajouter du texte dans les colonnes.
La classe .offset-X ajoute X colonnes vides à gauche d'une colonne.
On ajoute de points de rupture avec .offset-sm-X, .offset-md-X, .offset-lg-X et .offset-xl-X.
On utilise aussi les classes .mr-auto (margin right) et .ml-auto (margin left) pour séparer les colonnes.
Faire une grille qui utilise les classes .offset-3, .offset-5, .offset-lg-3 et .offset-lg-5.
Ajouter du texte dans les colonnes.
Les classes .order-X réordonnent les colonnes en fonction de l'index X (au lieu de leur ordre dans le HTML).
Elles ont de versions avec les points de rupture : .order-sm-X, .order-md-X, .order-lg-X et .order-xl-X.
Faire une grille avec 1 ligne et 3 colonnes telle que :
Envoyer par AMeTICE le fichier m3206-td2.zip contenant vos exercices dans «Exercices à rendre du TD 2/4».
Soumettre une bonne (!) question sur ce qu'on a vu aujourd'hui dans «Question à rendre du TD 2/4»