Que signifie le système de grille bootstrap ?

Qu'est-ce que le système de grille

Le système de grille fait référence à la division de la mise en page en colonnes de largeur égale, puis au passage Le nombre de colonnes est défini pour modulariser la mise en page. Le système de grille de Bootstrap utilise un modèle de 1 à 12 colonnes et utilise des calculs proportionnels pour définir les largeurs de colonnes que vous définissez. Par exemple, si vous souhaitez utiliser un mode de mise en page à deux colonnes pour cette ligne, la largeur de chaque colonne sera de 50 % du conteneur externe. Quel que soit l'appareil que vous utilisez pour parcourir, elle sera affichée dans celui-ci. proportion. Cependant, si la largeur de l'appareil est inférieure à la largeur minimale que vous avez définie, les deux colonnes ne formeront qu'une seule colonne côte à côte.

Le système de grille de Bootstrap

L'utilisation du système de grille dans Bootstrap est très simple et pratique, il suffit d'introduire leurs classes déjà définies dans vos divs.

Jetons d'abord un coup d'œil à plusieurs classes de grille qui peuvent être utilisées dans Bootstrap :

1 .col-xs-* Il s'agit d'une classe d'écran ultra-petit (

2. .col-sm-* Il s'agit d'une classe d'appareils à petit écran (≥768px et

3.col-md-* Il s'agit de la classe d'appareil moyenne (≥992px et

4.col-lg-* Il s'agit d'une grande classe d'appareils (≥1200px).

Comment utiliser le système de grille Bootstrap

Vous pouvez décider du style de mise en page que vous souhaitez appliquer sur différents appareils en utilisant les classes de grille correspondant à ces appareils. Par exemple :

Autres informations

En plus des méthodes d'utilisation ci-dessus, vous pouvez également utiliser la "classe de décalage de colonne" pour positionner rapidement votre propre grille. La méthode d'utilisation est similaire à

Selon cette méthode d'écriture, ce div sera décalé vers la droite de 3 colonnes côté PC.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne

Tutoriel Bootstrap

pour apprendre !

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!

bootstrap class

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn