Créez des sites web responsives avec Bootstrap 5

Découvrez les breakpoints

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.

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’elles.

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).

En tant que développeur front-end, 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 breakpoints (points d’arrêt) afin de compartimenter les différentes tailles d’affichage :

Comme vous pouvez le voir, il y a six tailles définies dans Bootstrap 5, ce qui vous offre bon nombre d’options.

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 le responsive 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 :

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 une   <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 cette 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.

Chaque modificateur de classe s’ajoute au même niveau de la   <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.

<div class=”row”>
      <div class=”col-6 col-md-4 col-lg-3”></div>
      <div class=”col-6 col-md-8 col-lg-9”></div>
</div>

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 la première 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 à cette   <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 à cette   <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 à cette   <div>.

Une logique similaire s'applique à la seconde   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 une   <div>, n’oubliez pas de le répercuter sur la seconde   <div>  du même niveau pour un total de 12 colonnes :   .col-md-4   +  .col-md-8    =    .col-md-12.

Espacez des colonnes avec des gouttières

Les espacements entre les différentes colonnes de la grille sont appelés gouttières (gutters, en anglais). 

Ces dernières sont ajustables grâce à la classe utilitaire  .g-{1-5}. L’espacement vertical par défaut des  .col  de Bootstrap 5 est équivalent à l’espacement donné par la classe  .g-4 ; ainsi dans l’exemple précédent, en ajoutant la classe  .g-2  à la  .row, cela a pour effet de réduire l’espacement entre les colonnes. 

Voici un exemple de gouttières dans le code :

<div class="container px-4">
    <div class="row gx-5">
        <div class="col">
            <div class="p-3 border bg-light">Custom column padding</div>
        </div>
        <div class="col">
            <div class="p-3 border bg-light">Custom column padding</div>
        </div>
    </div>
</div>

Pour en savoir plus sur les gouttières, je vous invite à consulter la documentation Bootstrap.

Laissez des colonnes vides grâce aux  offset

Pour certains designs, vous aurez besoin de laisser l’équivalent d’une colonne (ou plus) vide entre 2 colonnes. Ce qui est le cas pour la partie Expertise de notre portfolio :

Pour ce faire, Bootstrap met à votre disposition la classe  .offset-{0-11}  qui va permettre de pousser de 0 à 11 colonne(s) sur la droite le contenu de la colonne sur laquelle vous ajoutez cette classe. 

Dans la documentation, Bootstrap présente un exemple des  offset  : 

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
    </div>
</div>

Ce code a pour rendu :

Dans le cas de votre portfolio, il faudra utiliser la classe  .offset-1  sur la deuxième colonne pour pouvoir recréer la structure attendue. Vous pouvez en savoir plus sur comment utiliser l’offset avec des colonnes dans la documentation Bootstrap. 

À vous de jouer !

Dans cet exercice, vous allez rendre votre structure de site responsive.

Votre mission, si vous l’acceptez, est d’ajouter :

• les différents modificateurs de classe pour chacune des colonnes ;

• les différents modificateurs de classe pour les  .offset  ;

• des gutters pour espacer les colonnes.

Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !

En résumé

• Bootstrap 5 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 breakpoint (point d'arrêt) est le point à partir duquel la mise en page change. 

• Les breakpoints permettent de compartimenter les différentes tailles d'affichage.

• Les gouttières nous permettent d’espacer les colonnes.

• Les classes  .offset-*  permettent de laisser de 0 à 11 colonnes vides à gauche de la colonne sur laquelle elles sont appliquées.

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