Bootstrap est le framework CSS le plus utilisé dans le monde. Il peut être utilisé par tout le monde à partir de rien et il est à la base de très nombreux thèmes de sites internet (WordPress ou PrestaShop par exemple).
Un framework est une source de code de base que l’on peut insérer dans son projet afin d’avoir une fondation pré-conçue, utilisable en kit et personnalisable. Bootstrap permet, quant à lui, permet de gérer par défaut beaucoup d’éléments de mise en page : des boutons, des paginations, des cartes, des carrousels, etc. Ce qui va nous intéresser le plus là-dedans est la gestion du responsive vue par Bootstrap 5.
C’est parti pour voir ensemble gérer la création d’un site responsive avec Bootstrap 5.
Sommaire :
Il existe beaucoup de framework CSS permettant de réaliser un site responsive. Cependant, Bootstrap 5 est tout simplement le plus utilisé depuis des années. Sa documentation est complète et bien réalisée, sans compter la communauté autour de Bootstrap 5 qui est gigantesque.
Un site dit « responsive » est un site internet dont le contenu est capable de s’adapter au format du support sur lequel on le lit. L’affichage sera plus large sur un écran HD ; alors qu’il sera plus compact et vertical sur un smartphone. L’objectif est de permettre d’avoir un site qui s’adapte à tous les supports du premier coup. Historiquement, les sites internet avaient parfois deux versions : une version pour mobile et une version pour ordinateur. Lors de changements majeurs de la structure, il fallait donc mettre à jour deux sites disctincts. Grâce au responsive, il n’y a qu’un seul site à modifier.
Pour présenter la chose autrement, il faut voir le responsive comme une grille, avec des lignes et des colonnes. En dessous d’une certaine dimension, les lignes disparaissent, les cellules se placent en fil horizontal. C’est grâce à cette idée que les sites internet deviennent lisibles sur un téléphone.
Gardez la notion de grille, de lignes et de colonnes dont on a parlé juste au-dessus. Bootstrap 5 utilise ce système en mettant des noms dessus, plus exactement, des classes CSS.
Les grilles vont ainsi avoir la classe container ou container-fluid. Dans le premier cas, la grille se limite à une largeur maximale de 1320 pixels ; alors que dans le second cas, elle prendra toute la largeur disponible sans restriction.
Les lignes, c’est très simple : elles sont toujours matérialisées grâce à la classe row.
Les colonnes se gèrent de manière un peu de plus délicates. Il existe deux façons de les voir. La première est un nombre indéfini de colonnes qui partagent proportionnellement la ligne (toutes occuperont la même largeur), grâce à la classe CSS col. La seconde méthode pour gérer les colonnes est d’imaginer une ligne de 12 emplacements, où vous pouvez renseigner le nombre de places que va prendre une cellule, avec col-x.
Le côté responsive se gère sur les cellules directement. Bootstrap 5 possède des « breakpoints », c’est-à-dire des intervalles de largeur d’écran définis. Voir la page de la documentation Bootstrap 5 sur les breakpoints pour en savoir plus. Grâce à ce système, vous pouvez à tout moment indiquer quelle portion doit prendre votre cellule à chaque intervalle de dimension. C’est très puissant puisque seulement grâce aux classes CSS, vous pouvez adapter la grille en fonction des éléments que vous avez besoin d’afficher sur votre site.
Pour avoir tous les détails et des exemples d’utilisation de grilles, vous pouvez vous référer à la documentation officielle de Bootstrap 5, dédiée à ce sujet. Si le code n’est pas votre tasse de thé ou que le concept reste assez flou, demandez de l’aide auprès d’un développeur bootstrap freelance sur Codeur.com.
Bootstrap 5 est un outil très puissant et très performant pour générer des sites internet responsive. Vous pouvez l’installer très facilement en téléchargeant l’archive zip sur le site de Bootstrap 5 ou en utilisant des outils comme NPM.
En cas de problème avec l’utilisation de Bootstrap, si vous rencontrez des difficultés à adapter votre code, ou que la gestion des grilles ou du responsive vous semble trop complexe, n’ayez pas peur : demandez l’intervention d’un développeur freelance spécialisé sur Bootstrap pour vous aider à créer ou corriger votre site internet responsive avec Bootstrap 5. Sur Codeur.com, le dépôt d’annonce est gratuit et vous permet de recevoir des devis rapidement de nombreux développeurs freelances.