Bootstrap 5 Système de grille | Expliqué

Le système de grille de bootstrap est construit à l'aide du flex-box. Il convertit la page Web en 12 colonnes. Un système de grille est une disposition bidimensionnelle qui signifie qu'elle peut fonctionner avec les lignes et les colonnes à la fois. Un utilisateur peut fusionner des colonnes pour obtenir les résultats requis ou une disposition spécifique.

Système de grille

Le système de grille de bootstrap divise la page en 12 colonnes. Comme dans l'exemple ci-dessous .La classe col est utilisée pour fabriquer des colonnes et tout le système de grille dépend de ce .classe col. Ce système de grille est la meilleure approche pour empiler le contenu horizontalement et permettre au maximum l'utilisation de la page.

Code

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Pour faire différentes dispositions que nous utilisons .ligne et .col classe.

Classe Col sans aucune taille

Si vous n'avez pas précisé la taille des colonnes, .col La classe divise automatiquement la ligne également en fonction du nombre de divs avec .col cours dedans.

Code

.col
.col
.col

Dans cet exemple, j'ajoute seulement trois divs avec le .col classe sans spécifier le nombre de colonnes mais le .col La classe donne automatiquement la fusion de 4 colonnes à chaque div et couvre collectivement 12 colonnes.

Classe Col avec taille

Si les tailles de colonnes sont spécifiées, alors .La classe COL divise la ligne en fonction de la taille spécifiée de 0 à 12.

Code

.col-4
.col-6
.col-2

Dans cet exemple, j'ajoute trois div .col classe et spécifiez le nombre de colonnes comme 4, 6 et 2. Maintenant, ces trois colonnes couvrent toujours l'espace de 12 colonnes, mais maintenant avec différentes tailles. Cela aide un utilisateur à gérer le contenu dans une page et à l'utiliser au maximum.

Exemple 2

Cet exemple concerne le problème dans lequel la taille des divs dépasse 12.

Code

.col-4
.col-6
.col-5

Maintenant dans cet exemple, les 2 premiers divs couvrent déjà 10 colonnes de suite, laissant l'espace pour deux autres colonnes, mais la troisième div est livrée avec les colonnes Taille 5, ce qui se traduit par le déplacement de la troisième div à la ligne suivante pour couvrir 5 colonnes d'espace qui quitte 2 colonnes espace dans la première ligne vide. Donc, pour éviter ce type de problème, assurez-vous toujours de diviser les colonnes d'une manière qui couvre collectivement l'espace de 12 colonnes dans la ligne.

Classe COL avec des points d'arrêt

.col La classe est également utilisée avec différents points d'arrêt pour contrôler la vue de contenu sur différents écrans.

• .col-xxl
• .col-xl
• .col-lg
• .col-md
• .col-sm

Code

.col-md
.col-md
.col-md

Dans l'exemple ci-dessus, trois divs sont créés en utilisant .col-md La classe est comme un .col classe mais la différence entre simple .col classe et .col-md La classe est que .col La classe distribue des colonnes également à chaque div, puis agissez de même sur chaque taille d'écran mais .col-md La classe distribue également les colonnes également parmi chaque div, mais elle reste la même xxl, xl, lg et Maryland tailles d'écran mais dès qu'il dépasse la taille de l'écran moyen, tous les divs couvrent entièrement 12 colonnes chacune qui entraîne la fabrication de trois lignes et les empiler verticalement.

Classe Col avec des points d'arrêt et des tailles

.col La classe est également utilisée avec différents points d'arrêt pour contrôler la vue de contenu sur différents écrans, mais voir ces classes en action doivent également spécifier leurs tailles.

• .col- *
• .col-xxl- *
• .col-xl- *
• .Col-lg- *
• .col-md- *
• .col-sm- *

Remplacer * par le nombre de 0 à 12.

Code

.col-md-4
.col-md-6
.col-md-2

Dans l'exemple ci-dessus, j'applique .col-md- * classe sur trois divs avec la taille 4,6,2, car il a montré que cette classe est applicable sur un double écran extra-grand (xxl), extra large (xl), grand (LG) et moyen (MD) dès que la taille de l'écran va en dessous de l'écran moyen (MD) Tous les divs se redimentent et couvrent 12 colonnes chacune qui entraînent 3 lignes et chaque ligne est empilée verticalement. C'est ainsi que les dispositions dynamiques et flexibles sont créées.

Conclusion

Pour travailler dans une grille bootstrap, utilisez .ligne classe et enveloppez-le .col classe si vous souhaitez attribuer des colonnes égales à chaque div, mais si vous souhaitez attribuer différents nombres de colonnes à chaque div, utilisez .Col- Size (0-12) aux divs comme exigence. Cependant, si vous souhaitez faire une utilisation plus flexible et dynamique .col classe avec points d'arrêt (xxl / xl / lg / md / sm), plus spécifier leurs tailles (0-12) aussi .Col- BreakPoint - Size.