Ce cours de la formation gratuite de Bootstrap 5 vous explique comment créer une grille responsive design en agissant sur la classe ROW plutôt que les classes COL.
>> La typographie avec Bootstrap
Bonjour à tous et bienvenue dans ce cours sur Bootstrap où nous allons explorer en détail les systèmes de grilles responsives. Dans cette série de vidéos, nous avons déjà abordé la manière de créer une grille responsive avec Bootstrap. Aujourd’hui, nous allons examiner une deuxième méthode, qui offre une approche différente, mais tout aussi efficace pour structurer vos mises en page.
Création de la Structure de Base
Pour commencer, j’ai préparé un fichier de travail, installé Bootstrap et ajouté du contenu de base, comme nous avons l’habitude de le faire. J’ai créé une <div> avec la classe Container, à l’intérieur de laquelle j’ai placé une autre <div> avec la classe Row. Ensuite, j’ai ajouté une <div> avec la classe Column dans cette dernière, et j’y ai inséré un titre et un paragraphe. Pour illustrer notre propos, j’ai décidé de dupliquer cette structure pour obtenir quatre colonnes au total.
Approche Traditionnelle de Création de Colonnes
Dans cette approche traditionnelle, nous avons créé nos colonnes en répartissant les éléments à l’intérieur des <div> avec la classe Column. Cela nous donne une structure de base qui fonctionne bien pour un affichage sur grand écran. Cependant, sans spécifier de classes de point de rupture, nos colonnes restent les mêmes même lorsque la taille de l’écran est réduite.
La Méthode Alternative : Agir sur l’Élément Parent
Plutôt que de définir les colonnes individuellement, nous pouvons également agir au niveau de l’élément parent, soit la classe Row. Imaginons que nous voulions un affichage sur une seule colonne pour les smartphones. Dans ce cas, nous pouvons ajouter la classe row-cols-1 à notre <div> Row. Cette classe nous permet de spécifier directement le nombre de colonnes que nous voulons, sans avoir à utiliser de préfixes.
Personnalisation de l’Affichage
En utilisant cette méthode, nous pouvons facilement personnaliser l’affichage en fonction de la taille de l’écran. Par exemple, pour obtenir deux colonnes sur les tablettes, nous ajoutons la classe row-cols-md-2. De même, pour maintenir quatre colonnes sur un grand écran, nous utilisons la classe row-cols-lg-4. Cette approche nous permet d’obtenir un affichage flexible et adaptatif sur différents appareils.
Avantages et Inconvénients
Cette méthode offre une manière rapide et efficace de créer des mises en page responsives. Cependant, elle présente quelques limitations, notamment en ce qui concerne la personnalisation des dimensions des colonnes. Contrairement à l’approche traditionnelle, où nous pouvons définir des largeurs de colonnes variables, cette méthode attribue des dimensions égales à toutes les colonnes.
Conclusion
En résumé, les grilles responsives de Bootstrap offrent plusieurs méthodes pour structurer vos mises en page de manière flexible et adaptative. La méthode que vous choisissez dépendra des besoins spécifiques de votre projet. J’espère que cette explication vous aidera à mieux comprendre les différentes options disponibles et à choisir celle qui convient le mieux à vos besoins.
N’hésitez pas à vous abonner et à liker la vidéo pour soutenir la chaîne et être informé des prochaines vidéos. Merci de votre attention et à bientôt !
