Le raster de Bootstrap4 est divisé en plusieurs catégories

Les grilles de bootstrap4 sont divisées en 5 catégories : 1. ".col", pour tous les appareils ; 2. ".col-sm", pour les tablettes ; 3. ".col-md", pour les moniteurs de bureau ; . " .col-lg ", pour les grands moniteurs de bureau ; 5. " .col-xl ", pour les très grands moniteurs de bureau.

L'environnement d'exploitation de ce didacticiel : système Windows 7, version bootsrap 4, ordinateur DELL G3

Bootstrap fournit un système de grille fluide (grille) réactif, axé sur les appareils mobiles, qui change en fonction de l'écran ou de la vue. la taille de la fenêtre augmente, le système la divisera automatiquement en 12 colonnes maximum.

Nous pouvons également définir le nombre de colonnes en fonction de nos propres besoins :

Le système de grille de Bootstrap 4 est réactif, et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran.

Le système de grille Bootstrap 4 comprend les 5 classes suivantes :

• .col - pour tous les appareils

• .col-sm - tablette - largeur d'écran égale ou supérieure à 576px

• . col -md- moniteur de bureau - largeur d'écran égale ou supérieure à 768px)

• .col-lg- grand moniteur de bureau - largeur d'écran égale ou supérieure à 992px)

• .col-xl- bureau extra large moniteur - largeur d'écran égale ou supérieure à 1200px)

Le tableau suivant résume le fonctionnement du système de grille Bootstrap sur différents appareils :

Largeur maximale du conteneurAucun (auto )540px720px 960px1140pxPréfixe de classe.col-.col-sm-.col-md-.col-xl-1230px (Chaque côté d'une colonne mesure respectivement 15 px) OuiOui

	Extra petits appareils ≥576px	Moniteur de bureau ≥768px	Grand écran de bureau ≥992px	Extra grand écran de bureau ≥1200px
	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl- .col-lg-
	nombre de colonnes et
	largeur d'espacement
	Peut être imbriqué
	Tri des colonnes

Pour plus de connaissances sur le bootstrap, veuillez visiter :

Tutoriel de base du bootstrap🎜 ! ! 🎜

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!