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>

Jeux

• Flexbox Froggy
• Grid Garden

Références

• https://www.w3schools.com/css/css_rwd_intro.asp
• https://web.dev/articles/responsive-web-design-basics?hl=fr
• https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design