Qu'est-ce que le système à 12 grilles de bootstrap ?

Dans bootstrap, le système à 12 grilles fait référence à la division de la mise en page en 1 à 12 colonnes de largeur égale, à la définition de la largeur des colonnes via le calcul des proportions et à la définition de la méthode de mise en page modulaire via le nombre de colonnes. style, système de grille mobile d’abord.

L'environnement d'exploitation de ce didacticiel : système Windows 10, version bootstrap 3.3.7, ordinateur DELL G3

Qu'est-ce que le système à 12 grilles de bootstrap

Bootstrap fournit un ensemble de grilles de streaming réactives et adaptées aux mobiles ? Le système, à mesure que la taille de l’écran ou de la fenêtre augmente, sera automatiquement divisé en 12 colonnes maximum.

Qu'est-ce que Grid ?

En graphisme, une grille est une structure (généralement bidimensionnelle) constituée d'une série de lignes droites qui se croisent (verticales, horizontales) utilisées pour organiser le contenu. Il est largement utilisé pour la mise en page et la structure du contenu dans la conception imprimée. Dans la conception Web, il s’agit d’une méthode permettant de créer rapidement des mises en page cohérentes et d’utiliser efficacement HTML et CSS.

En termes simples, les grilles dans la conception Web sont utilisées pour organiser le contenu, rendre le site Web facile à naviguer et réduire la charge de l'utilisateur.

Qu'est-ce que le système Bootstrap Grid ?

Bootstrap comprend un système de grille fluide, réactif et axé sur les mobiles, qui évolue jusqu'à 12 colonnes de manière appropriée à mesure que la taille de l'appareil ou de la fenêtre d'affichage augmente. Il contient des classes prédéfinies pour des options de mise en page simples, ainsi que de puissantes classes mixin pour générer des mises en page plus sémantiques.

Le système de grille fait référence à la division de la mise en page en colonnes de même largeur, puis à la modularisation de la mise en page en définissant le nombre de colonnes. 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 disposition à deux colonnes pour cette ligne, alors la largeur de chaque colonne est de 50 % du conteneur extérieur. Quel que soit l'appareil que vous utilisez pour parcourir, elle sera affichée dans cette 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 aux différentes classes de grille que Bootstrap peut utiliser :

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).

Recommandations associées : Tutoriel 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!