Comment fonctionnent « col-md-4 », « col-xs-1 » et « col-lg-2 » dans le système Bootstrap Grid ?

Système de grille dans Bootstrap : comprendre "col-md-4", "col-xs-1" et "col-lg-2"

Le système de grille Bootstrap vous permet de contrôler la disposition et l'alignement des éléments dans différentes tailles d'écran. Les classes "col-", couplées aux nombres, jouent un rôle crucial dans ce système.

Comment les nombres alignent les grilles

Les nombres dans le "col-* " Les classes représentent la largeur d'une colonne par rapport à la largeur totale d'un conteneur. Chaque conteneur peut accueillir 12 colonnes au total. Par conséquent, "col-md-6" occuperait 6 colonnes sur 12, ce qui donnerait une colonne qui fait la moitié de la largeur du conteneur.

Utiliser les nombres

Pour utiliser ces numéros, incluez simplement la classe « col- » appropriée suivie du numéro. Par exemple, un div avec la classe « col-xs-3 » occuperait 3 colonnes sur des écrans très petits (c'est-à-dire des téléphones portables), tandis qu'un div avec la classe « col-sm-6 » occuperait 6 colonnes sur de petits écrans. écrans (c'est-à-dire tablettes).

Ce qu'ils représentent

Les chiffres dans "col-*" représentent les points d'arrêt réactifs définis dans Bootstrap. Les lettres xs, sm, md et lg correspondent à :

• xs : Extra small (téléphones portables)
• sm : Small (tablettes)
• md : Moyen (certains bureaux)
• lg : Grand (bureaux restants)

En utilisant plusieurs classes "col-" sur un élément, vous pouvez spécifier comment il doit se comporter selon différentes tailles d'écran . Par exemple, le code suivant créerait une colonne qui occupe la moitié de la largeur sur les téléphones mobiles mais seulement un tiers de la largeur sur les tablettes :

<div>

Comprendre les classes "col-*" permet de créez des mises en page flexibles et réactives dans Bootstrap. En contrôlant le nombre et la taille des colonnes, vous pouvez obtenir une expérience utilisateur optimale sur différents appareils.

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!