Responsive Web Design
Objectifs
Comment adapter un site Web selon la taille de l'écran ?
Cours
F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.
Exercices
Grille Bootstrap
- Faire les exercices 1 à 4 sur Grille Bootstrap.
- CodePen est un IDE en ligne pour écrire du code HTML, CSS et JavaScript.
- Modifier uniquement la partie HTML.
- Redimensionner la fenêtre du navigateur pour voir les changements.
- Utiliser la documentation de Bootstrap pour vous aider.
Étapes 1-4
Indice 1
Tout mettre dans un container.
Indice 1.1
Utiliser des row et des col.
Solution 1
<div class="container">
<div class="row">
<div class="col">
<div class="block red"></div>
</div>
<div class="col">
<div class="block blue"></div>
</div>
<div class="col">
<div class="block green"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="block yellow"></div>
</div>
<div class="col">
<div class="block purple"></div>
</div>
<div class="col">
<div class="block teal"></div>
</div>
</div>
</div>
Indice 2
Utiliser les classes col-xl-* et col-* (* étant un nombre).
Indice 2.1
Utiliser qu'une seule row.
Indice 2.2
Les breakpoints s'appliquent à partir (plus grand) de la largeur spécifiée.
Solution 2
<div class="container">
<div class="row">
<div class="col-12">
<div class="block red"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block blue"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block green"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block yellow"></div>
</div>
<div class="col-12 col-xl-6">
<div class="block purple"></div>
</div>
<div class="col-12 col-xl-6">
<div class="block teal"></div>
</div>
</div>
</div>
Indice 3
Commencer par les plus petits écrans.
Solution 3
<div class="container">
<div class="row">
<div class="col-12 col-xl-2">
<div class="block red"></div>
</div>
<div class="col-6 col-xl-2">
<div class="block blue"></div>
</div>
<div class="col-6 col-xl-2">
<div class="block green"></div>
</div>
<div class="col-12 col-xl-2">
<div class="block yellow"></div>
</div>
<div class="col-6 col-xl-2">
<div class="block purple"></div>
</div>
<div class="col-6 col-xl-2">
<div class="block teal"></div>
</div>
</div>
</div>
Solution 4
<div class="container">
<div class="row">
<div class="col-12">
<div class="block red"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="block blue"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="block green"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="block yellow"></div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="block purple"></div>
</div>
<div class="col-12 col-xl-9">
<div class="block teal"></div>
</div>
</div>
</div>
Papier 1-4
Refaire les exercices 1 à 4, mais sur papier. Voici le code de départ :
<div class="rouge"></div>
<div class="bleu"></div>
<div class="vert"></div>
<div class="jaune"></div>
<div class="violet"></div>
<div class="turquoise"></div>
Solution 1
<div class="container">
<div class="row">
<div class="col">
<div class="rouge"></div>
</div>
<div class="col">
<div class="bleu"></div>
</div>
<div class="col">
<div class="vert"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="jaune"></div>
</div>
<div class="col">
<div class="violet"></div>
</div>
<div class="col">
<div class="turquoise"></div>
</div>
</div>
</div>
Solution 2
<div class="container">
<div class="row">
<div class="col-12">
<div class="rouge"></div>
</div>
<div class="col-12 col-xl-4">
<div class="bleu"></div>
</div>
<div class="col-12 col-xl-4">
<div class="vert"></div>
</div>
<div class="col-12 col-xl-4">
<div class="jaune"></div>
</div>
<div class="col-12 col-xl-6">
<div class="violet"></div>
</div>
<div class="col-12 col-xl-6">
<div class="turquoise"></div>
</div>
</div>
</div>
Solution 3
<div class="container">
<div class="row">
<div class="col-12 col-xl-2">
<div class="rouge"></div>
</div>
<div class="col-6 col-xl-2">
<div class="bleu"></div>
</div>
<div class="col-6 col-xl-2">
<div class="vert"></div>
</div>
<div class="col-12 col-xl-2">
<div class="jaune"></div>
</div>
<div class="col-6 col-xl-2">
<div class="violet"></div>
</div>
<div class="col-6 col-xl-2">
<div class="turquoise"></div>
</div>
</div>
</div>
Solution 4
<div class="container">
<div class="row">
<div class="col-12">
<div class="rouge"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="bleu"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="vert"></div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="jaune"></div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="violet"></div>
</div>
<div class="col-12 col-xl-9">
<div class="turquoise"></div>
</div>
</div>
</div>
Étapes 5-7
Faire les étapes 5 à 7 sur Grille Bootstrap en utilisant Horizontal alignment
Solution 5
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<div class="block red"></div>
</div>
<div class="col-12 col-md-6">
<div class="block blue"></div>
</div>
<div class="col-12 col-xl-8">
<div class="block green"></div>
</div>
<div class="col-12 col-md-6">
<div class="block yellow"></div>
</div>
<div class="col-6 col-md-6">
<div class="block purple"></div>
</div>
<div class="col-6 col-md-12 col-xl-8">
<div class="block teal"></div>
</div>
</div>
</div>
Solution 6
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-4">
<div class="block red"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="block blue"></div>
</div>
<div class="col-12 col-md-4">
<div class="block green"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-xl-4">
<div class="block yellow"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-4">
<div class="block purple"></div>
</div>
<div class="col-12 col-md-8">
<div class="block teal"></div>
</div>
</div>
</div>
Solution 7
<div class="container">
<div class="row justify-content-end">
<div class="col-12 col-xl-6">
<div class="block red"></div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-12 col-xl-6">
<div class="block blue"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-xl-6">
<div class="block green"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-4 col-xl-3">
<div class="block yellow"></div>
</div>
<div class="col-12 col-md-4 col-xl-3">
<div class="block purple"></div>
</div>
<div class="col-12 col-md-4 col-xl-3">
<div class="block teal"></div>
</div>
</div>
</div>