Comment les nombres dans les classes de grille Bootstrap contrôlent-ils la disposition ?

Comprendre le système de grille dans Bootstrap

Dans Bootstrap, le système de grille permet un contrôle précis de la disposition à l'aide de classes telles que col-md-4, col-xs-1 et col-lg-2. Ces classes exploitent les nombres pour déterminer l'alignement, l'utilisation et la représentation de la grille.

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

Les nombres dans ces noms de classe (1-12) signifient la proportion de la largeur d'un conteneur qu'une colonne de grille particulière s'étend. Par exemple, col-*-6 s'étend sur six des 12 colonnes au total, col-*-12 s'étend sur toute la largeur (12 colonnes), et ainsi de suite.

Utiliser les nombres

Pour utiliser ces chiffres efficacement, imaginez un conteneur divisé en 12 colonnes égales. En attribuant des classes à des numéros spécifiques, vous pouvez définir précisément la manière dont les colonnes occupent le conteneur. Par exemple, utiliser col-xs-6 deux fois dans un conteneur crée deux colonnes de taille égale qui remplissent collectivement tout le conteneur.

Représentation des nombres

Les nombres dans les noms de classe représentent le nombre de colonnes que les éléments de grille s'étendent dans leur taille de conteneur respective. Par exemple, col-xs-6 indique que l'élément occupe la moitié de la largeur du conteneur sur des écrans très petits (téléphones).

Impact des conceptions réactives

Bootstrap propose plusieurs classes de colonnes, telles que xs, sm, md et lg, pour répondre à différentes tailles d'écran. Ces préfixes de classe dictent la taille d'écran à laquelle une configuration de grille particulière devient effective. En combinant des classes avec différents préfixes (par exemple, col-xs-6 col-md-4), vous pouvez créer des mises en page réactives qui s'adaptent en fonction de l'appareil utilisé.

Prise en charge de plusieurs tailles d'écran

Si vous attribuez plusieurs classes de colonnes à un élément, la configuration de grille spécifiée s'applique à la taille d'écran correspondante et plus grande. Par exemple, col-xs-6 col-md-4 s'étendra sur six colonnes sur les écrans très petits et petits, et quatre colonnes sur les écrans moyens et grands, à moins qu'elle ne soit remplacée par une autre déclaration.

Remarque : Lorsqu'aucune classe xs n'est spécifiée, un élément est par défaut col-xs-12, ce qui signifie qu'il s'étendra sur toute la largeur sur des dimensions très petites. écrans.

Gestion des débordements

Gardez à l'esprit que le dépassement de 12 colonnes dans un conteneur entraînera l'affichage des éléments débordants sur la ligne suivante plutôt que d'être renvoyés dans la ligne actuelle. .

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!