Que signifient « col-md-4 », « col-xs-1 » et « col-lg-2 » dans le système de grille de Bootstrap ?

Comprendre le système de grille dans Bootstrap : décoder "col-md-4", "col-xs-1" et "col-lg-2"

Le système de grille de Bootstrap fournit une solution flexible et réactive pour structurer les mises en page. Trois préfixes de classe de clé sont utilisés : "col-xs", "col-sm" et "col-lg", suivis d'un nombre. Ces nombres définissent la façon dont les colonnes s'alignent dans la grille.

Comment le nombre aligne les grilles

Le nombre qui suit le préfixe représente le nombre de colonnes qu'un élément donné occupera de 12 colonnes disponibles. Chaque ligne a un total de 12 colonnes, donc "col--6" occupera la moitié de l'espace disponible, tandis que "col--12" ​​s'étendra sur toute la largeur.

Comment utiliser les nombres

Lors de l'utilisation de ces classes, vous devez spécifier le préfixe en fonction de la taille d'écran prévue. "xs" s'applique aux très petits écrans (téléphones mobiles), "sm" aux petits écrans (tablettes), "md" aux écrans moyens (certains ordinateurs de bureau) et "lg" aux grands écrans (autres ordinateurs de bureau).

Par exemple, pour créer deux colonnes égales dans une ligne, vous utiliserez :

<div>

What the Numbers Représenter

Les nombres dans les classes représentent des largeurs spécifiques dans la grille. Chaque colonne représente une fraction de l'espace total disponible dans une ligne :

• "col-*-1" : 1/12 de la largeur
• "col-*-2" : 2/12 de la largeur
• "col-*-3" : 3/12 de la width
• ...
• "col-*-12": 12/12 de la largeur

En combinant ces classes, vous pouvez créer des mises en page personnalisées qui s'adapter à différentes tailles et résolutions d'écran. N'oubliez pas d'utiliser plusieurs classes de colonnes pour spécifier différents comportements à différents points d'arrêt. C'est ce qui rend Bootstrap réactif et vous permet de créer des mises en page flexibles et adaptatives.

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!