Bootstrap 5 colonnes et système de grille | Expliqué

Bootstrap 5 est la dernière version du framework bootstrap qui permet à ses utilisateurs de créer des sites Web incroyables avec des feuilles de style CSS rapides et une réactivité améliorée. Bootstrap fonctionne en construisant un système de grille qui divise une page Web en différentes lignes et colonnes qui sont enveloppées à l'intérieur d'un conteneur. Ce message traite du système de grille dans Bootstrap 5 en détail avec ses différents composants.

Système de grille en bootstrap 5

Un système de grille dans Bootstrap 5 divise une page en lignes et colonnes, chaque ligne ayant 12 colonnes. Vous pouvez soit utiliser toutes les 12 colonnes si vous le souhaitez, cependant, sinon vous pouvez combiner des colonnes pour faire des colonnes plus larges. Vous devez utiliser des colonnes d'une manière que la somme augmente jusqu'à 12 ou moins de 12. Par exemple, vous pouvez utiliser les 12 colonnes ayant une largeur de 1 ou 2 colonnes ayant une largeur de 6. Quelle que soit la combinaison, le total doit être 12 ou moins.

Ce système de grille est composé de Flexbox rendant ainsi les éléments présents dans la grille réactive, ce qui signifie que la disposition changera sa structure en fonction de l'appareil sur lequel il est affiché. Voici une représentation visuelle d'un système de grille.

Cours de grille en bootstrap 5

Dans le but d'utiliser le système de grille, il existe plusieurs classes disponibles dont nous avons discuté ci-dessous. Toutes ces classes peuvent être regroupées pour fabriquer des structures plus flexibles et réactives.

1. -Classe XS

Cette classe est utilisée pour fabriquer un système de grille pour des petits appareils supplémentaires avec une largeur d'écran <576px.

2. -classe SM

Cette classe est utilisée pour faire une disposition de grille pour les petits appareils avec une largeur d'écran> = 576px.

3. -classe MD

Cette classe est utilisée pour créer un système de grille pour les appareils moyens avec une largeur d'écran> = 768px.

4. -LG- CLASS

Cette classe est utilisée pour créer un système de grille pour les grands appareils avec une largeur d'écran> = 992px.

5. -XL- Classe

Cette classe est utilisée pour fabriquer un système de grille pour les appareils extra-larges avec une largeur d'écran> = 1200px.

6. -xxl- classe

Cette classe est utilisée pour fabriquer un système de grille pour les appareils extra-larges avec une largeur d'écran> = 1400px.

Note: Les classes ci-dessus ont la capacité d'augmenter la largeur, par conséquent, si vous souhaitez utiliser la même largeur pour les classes moyennes et grandes, par exemple, vous devez spécifier la largeur pour la classe moyenne uniquement.

Composants d'un système de grille

Un système de grille fonctionne avec trois composants qui sont discutés dans cette section.

1. Conteneurs

Un conteneur est un élément de base d'un système de grille sans lequel le système ne fonctionne pas. Ceux-ci enveloppent tout le contenu d'un site Web à l'intérieur. Les conteneurs enveloppent le contenu de telle manière que ces éléments de rangée et les éléments de ligne contiennent des éléments de colonne.

2. Lignes

Les lignes dans un système de grille sont appelées le groupe horizontal de colonnes. Ces lignes peuvent être générées en utilisant le .ligne classe et sont enveloppés à l'intérieur d'un conteneur en utilisant le .récipient, ou .conteneur-fluide classe.

3. Colonnes

Un système de grille se compose de 12 colonnes qui sont enveloppées à l'intérieur des lignes. Pour créer ces colonnes .col La classe est utilisée avec la combinaison de l'une des classes mentionnées dans la section précédente. Par exemple, si vous créez une disposition pour des appareils supplémentaires, utilisez .col-xs classe.

Construire un système de grille de base dans Bootstrap 5

Ici, nous allons montrer comment vous pouvez créer un système de réseau de base dans deux scénarios différents.

Scénario 1

Lorsque vous souhaitez contrôler la largeur des colonnes et spécifier la disposition pour différents types de périphériques qui l'afficheront.

De cette façon, vous pouvez créer une structure de base d'un système de grille lorsque vous souhaitez spécifier les largeurs de colonne vous-même pour différents types d'appareils. Le .ligne La classe est utilisée pour générer des lignes, par exemple, ce qui précède crée deux lignes. La première ligne regroupe trois colonnes, tandis que la deuxième ligne a deux colonnes.

Lors de la génération de colonnes, utilisez le .col classe ainsi que spécifier le type de périphérique et un nombre qui devrait augmenter à un total de 12 pour chaque ligne.

Scénario 2

Lorsque vous voulez que Bootstrap gère automatiquement la largeur des colonnes.

Maintenant, lorsque vous ne spécifiez pas la taille de l'appareil et aucun aucun nombre qui augmente à un total de 12, alors bootstrap 5 gérera automatiquement les largeurs et la mise en page modifiera son comportement en fonction du type de périphérique.

Quelques exemples

Nous allons maintenant explorer quelques exemples pour mieux comprendre un système de grille et des colonnes dans Bootstrap 5.

Exemple 1

Ici, nous générerons quatre colonnes de largeur égale.

Html

Dans le code ci-dessus pour créer quatre colonnes de largeur égale, nous utilisons .conteneur-fluide classe pour obtenir un conteneur pleine largeur qui s'étend sur la largeur complète de la fenêtre. Ensuite, nous générons une ligne et en terminons quatre colonnes de largeur égale à l'intérieur de cette ligne. Chaque colonne a reçu un certain rembourrage en utilisant le .P-4 Classe de rembourrage et de services publics, de plus, chaque colonne a reçu une couleur d'arrière-plan et une couleur de texte.

Sortir

Des colonnes avec des largeurs égales ont été créées avec succès.

Exemple 2

Dans l'exemple ci-dessus, nous avons vu comment nous pouvons faire quatre colonnes de largeur égale. Maintenant, rendons ces colonnes réactives.

Html

Nous rendons les colonnes réactives en utilisant le .col-md-3 classe qui spécifie que les colonnes s'accumuleront les unes sur les autres lorsque la largeur de l'écran est inférieure à 768px.

Sortir

Lorsque la largeur de l'écran est égale et supérieure à 768px.

Lorsque la largeur de l'écran est inférieure à 768px.

Des colonnes réactives ont été générées.

Exemple 3

Les colonnes réactives ci-dessus étaient égales en largeur. Générons maintenant les colonnes réactives de largeur inégale.

Html

Le .col-md-4, et .col-md-8 Les classes font deux colonnes réactives de largeur inégale pour les appareils moyens.

Sortir

Lorsque la largeur de l'écran est> = 768px.

Lorsque la largeur de l'écran est <768px.

Deux colonnes réactives d'une largeur inégale ont été générées.

Conclusion

Un système de grille dans Bootstrap 5 fonctionne avec trois composants qui sont un conteneur, des lignes et des colonnes. Il divise essentiellement une page en lignes et colonnes, chaque ligne ayant 12 colonnes. Les colonnes d'un système de grille sont utilisées d'une manière que la somme augmente jusqu'à 12 ou moins de 12. De plus, il utilise certaines classes pour créer des dispositions réactives pour divers types d'appareils. Ce message traite en détail du système et des colonnes de la grille à l'aide d'exemples appropriés.