Comment les nombres dans la notation de grille de Bootstrap (col-md-4, col-xs-1, col-lg-2) définissent-ils la largeur et l'alignement des éléments ?

Comprendre la notation de grille dans Bootstrap : col-md-4, col-xs-1, col-lg-2

Le nouveau de Bootstrap Le système de grille utilise une notation simple mais efficace pour contrôler la disposition des éléments : col--, où l'astérisque (*) représente un nombre. Cette notation définit non seulement la largeur des éléments mais également leur alignement sur différentes tailles d'écran.

Comment les nombres définissent l'alignement de la grille

Les nombres dans les classes de grille (col- xs-1, col-lg-2, etc.) déterminent le nombre de "colonnes" qu'un élément occupera dans la grille. Bootstrap divise l'espace disponible en 12 colonnes égales, donc une classe col-md-4 spécifie que l'élément doit s'étendre sur 4 de ces 12 colonnes.

Comment utiliser les nombres

Pour utiliser ces nombres, ajoutez simplement une classe de grille à l'élément souhaité. Par exemple, pour créer une colonne qui s'étend sur 4 colonnes sur des écrans moyens (md), vous utiliserez la classe col-md-4. Pour un contrôle plus fin, vous pouvez spécifier différents nombres pour différentes tailles d'écran, tels que col-xs-1 col-md-4, ce qui ferait que l'élément occuperait 1 colonne sur les écrans très petits (xs) et 4 colonnes sur les écrans moyens (md ).

Ce que représentent les nombres

Les nombres dans les classes de grille représentent la largeur d'un élément par rapport à l'espace disponible. Par exemple, col-xs-1 signifie que l'élément occupera 1/12 de la largeur disponible sur les très petits écrans. De même, col-lg-2 signifie que l'élément occupera 2/12 de la largeur disponible sur les grands écrans.

Grid Class Precedence

Il est important de noter que la grille les classes pour une taille d’écran spécifique s’appliquent non seulement à cette taille mais également aux tailles d’écran plus grandes. Par exemple, la classe col-xs-6 s'applique à tous les écrans, du plus petit au plus grand. Cependant, si vous spécifiez une classe de grille pour une taille d'écran plus grande, elle remplacera celle pour une taille d'écran plus petite.

Conclusion

Comprendre la signification des nombres dans les classes col-md-4, col-xs-1 et col-lg-2 est crucial pour gérer efficacement la disposition des éléments dans Bootstrap. En tirant parti de ces cours, vous pouvez créer des conceptions Web réactives et adaptables qui s'adaptent parfaitement à différentes tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!