• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Rendez votre mise en page responsive

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Découvrez le concept de réactivité globale

Nous vivons à une époque où le progrès est de plus en plus rapide. On a l'impression qu'un nouveau périphérique sort tous les jours sur le marché ! Bien que cette cadence puisse être excitante, il est également épuisant de suivre toutes les variations des tailles d'écran que vous devez prendre en compte pour vous assurer que l'aspect et le fonctionnement des sites web que vous créez sont corrects.

C'est l'une des raisons pour laquelle Bootstrap est si populaire auprès des développeurs frontend. Il utilise une approche mobile-first. Cela implique que sa grille et ses composants sont conçus en priorité pour s'afficher par défaut correctement sur de petits écrans. 

Il vous est probablement arrivé d'ouvrir une page web sur votre smartphone et de vous rendre compte que le site était uniquement adapté pour les grands écrans. C'est frustrant, n'est-ce pas ?

Dans ce genre de cas, l'utilisateur aura tendance à quitter le site et n'y reviendra probablement jamais.

Pour éviter ce genre de désagrément, il est important de créer des pages responsives !

La bonne nouvelle, c'est qu'il n'est pas nécessaire de créer une mise en page différente pour chaque taille d'écran. Vous pouvez vous faciliter la vie, tout en créant une bonne expérience utilisateur. Pour cela, il est possible de regrouper toutes les tailles d'écran dans des compartiments différents, c'est-à-dire en utilisant des plages de tailles, et en générant des mises en page pour chacune d’elle.

Prenons un exemple type : un site web standard a besoin d'une mise en page pour des périphériques avec de grands écrans (ordinateurs de bureau), une autre pour des périphériques avec des écrans de taille moyenne (tablettes et petits ordinateurs portables) et enfin pour des périphériques plus petits (smartphones).

Quel doit être le nombre exact de pixels de chacune de ces tailles ?

En tant que développeur frontend, je suis (comme vous) très à cheval sur les détails et il me faut des définitions plus précises que grandes, moyennes, petites, etc. Je dois connaître les mesures exactes de chacune d'entre elles.

Conformément aux recommandations standard, les développeurs du framework ont défini des points d’arrêt afin de compartimenter les différentes tailles d’affichages :

Taille

Point d'arrêt

Modificateur de classe

Très petite

< 576 px

aucun

Petite

≥ 576 px

-sm

Moyenne

≥ 768 px

-md

Grande

≥ 992 px

-lg

Très grande

≥ 1 200 px

-xl

Comme vous pouvez le voir, il y a cinq tailles définies dans Bootstrap 4, ce qui vous offre bon nombres d’options.

Les cinq tailles de la grille intégrées dans Bootstrap 4
Les cinq tailles de la grille intégrées dans Bootstrap 4

De nombreuses classes Bootstrap pour la mise en page et les composants vous permettent d'ajouter un modificateur lié à la taille. Cela permet de contrôler la façon dont ils sont restitués, selon la taille d’écran affichée.

Mettez la réactivité en pratique

Nous avons beaucoup parlé théorie. Vous êtes sûrement impatient de mettre en pratique tout ce que vous avez appris !

Commençons par examiner la manière dont la réactivité fonctionne pour la grille de Bootstrap. La vidéo suivante montre comment une mise en page s’adapte en cas de changement de taille d’écran marquée par un point d’arrêt :

Dans la vidéo, seules trois mises en page ont été utilisées (petite, moyenne et grande). Même si Bootstrap comporte plusieurs tailles prédéfinies, vous pouvez choisir d’adapter le nombre utilisé en fonction de vos besoins ou de la structure de la page web. N'oubliez pas qu'en plus de l'effort supplémentaire que vous devrez fournir pour développer et tester chaque mise en page, un concepteur de site web devra probablement apporter sa contribution à chacune d'entre elles.

Pour appliquer les modificateurs de classes appropriés pour ces options de mise en page, il est important de comprendre qu'ils fonctionnent par le haut, c'est-à-dire de la plus petite taille d’écran vers la plus grande.

C'est l'approche mobile-first, vous vous rappelez ? 

Cela signifie que si vous n'ajoutez pas de modificateur de classe relatif à une taille d’écran supérieure, Bootstrap affichera automatiquement les éléments et composants de la grille dans les plus petits écrans et conservera la même mise en page, même si la taille de l'écran augmente.

Par exemple, si un  <div>  possède une seule classe ayant le modificateur   -md, celui-ci s’appliquera à tous les écrans d’une taille minimum de 768 px et supérieure.
Si ce même  <div>  utilise un second modificateur de classe d’une taille supérieure à  -md  comme  -lg  (largeur ≥ à 992 px) ou -xl (largeur ≥ à 1 200 px), ces derniers prendront effet sur le modificateur  -md  lorsque l’écran affiché aura atteint les points d’arrêt respectifs.

Cet extrait de code détaille la ligne bleue visible dans la dernière vidéo :

<div class="container">
...
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
Une des deux colonnes
</div>
<div class="col-6 col-md-8 col-lg-9">
Une des deux colonnes
</div>
</div>
</div>

Chaque modificateur de classe s’ajoute au même niveau du  <div>. L’adaptation responsive de la page web s’effectue automatiquement, dès lors qu’un point d’arrêt est franchi par la taille d’écran affichée.

Ci-dessus, nous avons une ligne avec deux  <div>  enfants qui occupent des largeurs différentes selon la taille de l’écran. Le mode d'interprétation des classes pour le premier des  <div>  enfants de la ligne est le suivant :

  • la classe .col-6  signifie que pour tous les écrans sans restriction de taille minimum ou maximum, attribuez six colonnes à ce  <div>  ;

  • la classe.col-md-4  signifie que pour tous les écrans avec une largeur minimum supérieure ou égale à 768 px, attribuez quatre colonnes à ce  <div>  ;

  • la classe  .col-lg-3  signifie que pour tous les écrans avec une largeur minimum supérieure ou égale à 992 px, attribuez trois colonnes à ce  <div>.

Une logique similaire s'applique au second  div  enfant.

Notez que le nombre total de colonnes attribuées à chaque modificateur de classe s'ajoute encore aux 12 colonnes de la grille de Bootstrap. Dans l'exemple précédent, cela signifie que lorsque vous utilisez un modificateur de classe sur un  <div>, n’oubliez pas de le répercuter sur le second  <div>  du même niveau pour un total de 12 colonnes : .col-md-4  +.col-md-8  =  .col-md-12

Reprenez l'exemple d'Info School

À présent, appliquons ce que vous avez appris à notre site web de l'école d’informatique (Info School). L'exemple sur lequel vous travaillez intégrera deux mises en page :

  • l'une pour les écrans très petits jusqu'aux écrans moyens, que l'on appellera mise en page d'écran plus petit ;

  • l'autre pour de grands écrans minimum, que l'on appellera mise en page d'écran plus grand.

Dans le dernier chapitre, nous avons créé la mise en page à trois colonnes pour les cartes d'information sur la page d'accueil. Comme nous n'avons pas encore utilisé les modificateurs de classes, le contenu de la ligne avec les cartes est divisé en trois colonnes .col sur toutes les tailles d'écran. Ce n’est pas une bonne façon de faire concernant les utilisateurs de smartphone. Le contenu apparaîtra de manière trop condensée à l’écran, et cela rendra la lecture bien plus difficile.

Pour de petits écrans, les cartes d'information doivent occuper toute la largeur de l'écran (en d'autres termes, 12 colonnes), comme cette capture d'écran le montre :

Conception de la page d'accueil pour des écrans plus petits
Conception de la page d'accueil pour des écrans plus petits

Rendez la mise en page responsive en affichant simultanément les trois cartes à la suite pour des écrans plus grands (comme affichés dans le dernier chapitre), et de façon empilée sur les écrans plus petits (comme ci-dessus).

Comme mentionné précédemment, toutes les classes Bootstrap qui n'ont pas de modificateurs de classe seront utilisées pour les plus petits écrans comme pour les tailles supérieures.

Dans le cas des cartes pour la page d'accueil, vous devez pour chacune d’elles les intégrer à l’intérieur d’une colonne  <div>  qui possède les classes suivantes :

  • .col-12 : cette classe définit le  <div>  afin qu'il occupe toute la largeur (12 colonnes) de l'écran pour des écrans très petits minimum et ce, jusqu’à l’intervention d’un potentiel modificateur de classe avec une taille supérieure ;

  • .col-lg-4   : cette classe permettra au  <div>  d'occuper quatre colonnes (1/3 de l'écran) sur de grands écrans avec une taille minimum supérieure ou égale à 992 px.

Le  <div>  parent pour chacune des cartes d'information ressemblera à cela :

<div class="col-12 col-lg-4">
[...contenu carte...]
</div>

Pour l'instant, nous nous concentrons sur la structure de la grille. Nous ajoutons  simplement du texte réservé pour le futur contenu. Les composants et leur contenu seront améliorés par la suite.

Poursuivez et mettez à jour la page d'accueil de votre exemple de site, afin que les  <div>  contenant les cartes soient responsive. Une fois que vous avez testé vous-même, vous pouvez vérifier votre travail dans le fichier index.html du dossier partie-2/chapitre-3/grille-réactive dans le dépôt GitHub de l'exemple de site.

En résumé

  • Bootstrap 4 est un framework frontend orienté mobile-first.

  • Une page responsive est une page qui réagit à différentes tailles d'écran de l'utilisateur, en modifiant la mise en page des composants et du contenu à ajuster.

  • Un point d'arrêt est le point à partir duquel la mise en page change. Les points d'arrêt permettent de compartimenter les différentes tailles d'affichage : 

    Taille

    Point d'arrêt

    Modificateur de classe

    Très petite

    < 576 px

    aucun

    Petite

    ≥ 576 px

    -sm

    Moyenne

    ≥ 768 px

    -md

    Grande

    ≥ 992 px

    -lg

    Très grande

    ≥ 1 200 px

    -xl

Maintenant que vous avez appris à rendre une grille de Bootstrap responsive, vous êtes prêt à ajouter des composants d'interface utilisateur à vos pages.

Exemple de certificat de réussite
Exemple de certificat de réussite