Quand utiliser le système de grille bootstrap

Lorsque vous utilisez bootstrap pour créer une page Web et espérez que la page Web puisse s'adapter à des appareils avec différentes résolutions, vous devez utiliser une grille système. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Le système de grille est un groupe d'éléments au niveau des blocs qui peuvent être disposés horizontalement et suivre l'écran Modifiez le style des éléments au niveau du bloc avec différentes résolutions.

Le système de grille est utilisé pour créer des mises en page à travers une série de lignes et de colonnes, et votre contenu peut être placé dans ces mises en page créées.

Voici comment fonctionne le système de grille Bootstrap :

"Row" doit être contenu dans .container (largeur fixe) ou .container-fluid (100% de largeur), afin de lui donner une valeur appropriée alignement et rembourrage.

Créez un ensemble de "colonnes" dans le sens horizontal à travers des "lignes".

Votre contenu doit être placé dans "column", et seule "column" peut être un élément enfant direct de la ligne

Similaire à .row Les classes prédéfinies comme .col-xs-4 peuvent le faire. être utilisé pour créer rapidement des dispositions de grille. Les mixins définis dans le code source de Bootstrap peuvent également être utilisés pour créer des dispositions sémantiques en utilisant "column(). column)" définit l'attribut padding pour créer un espace (gouttière) entre les colonnes. une marge de valeur négative pour l'élément .row pour compenser le remplissage défini pour l'élément .container, il s'agit indirectement de "ligne". La "colonne" incluse compense le remplissage. La valeur négative de

est la raison pour laquelle le contenu dans. l'exemple suivant est aligné.

Les colonnes d'un système raster sont représentées par la plage qu'elles couvrent. Par exemple, trois colonnes de largeur égale peuvent être créées en utilisant trois .col-xs-4 >Si la "colonne" contenue. dans une "ligne" est supérieure à 12, les éléments de la "colonne" supplémentaire seront disposés dans une nouvelle ligne dans son ensemble

les classes de grille s'appliquent aux appareils dont la largeur d'écran est supérieure ou égale à la. La taille du point d'arrêt et les classes de grille sont remplacées pour les appareils à petit écran. Par conséquent, toutes les classes de grille .col-md-* appliquées sur un élément s'appliquent aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt et remplacent la taille du point d'arrêt. Par conséquent, l'application de n'importe quel .col-lg-* sur l'élément n'affecte pas non plus les appareils à grand écran

Plus d'articles techniques liés à Bootstrap, veuillez visiter le

Tutoriel Bootstrap<.> rubrique 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!