Comment créer un système de grille avec Bootstrap

Ce que je vous apporte cette fois, c'est BootstrapComment créer un système de grille Nous savons qu'il est très important de créer un système de grille dans Bootstrap.

Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.

Le système de grille est au cœur de Bootstrap. C'est précisément grâce à l'existence du système de grille que Bootstrap peut avoir une solution de mise en page réactive si puissante.

La documentation officielle dit ceci :

Bootstrap Fournit un système de grille fluide réactif et mobile qui se divise automatiquement en 12 colonnes maximum à mesure que la taille de l'écran ou de la fenêtre d'affichage augmente. 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.

Comprenons ce paragraphe et constatons que la partie la plus importante est la priorité des appareils mobiles. Alors, qu'est-ce que la priorité des appareils mobiles ?

Le code CSS de base de Bootstrap démarre par défaut à partir d'appareils à petit écran (tels que les appareils mobiles, les tablettes), puis utilise des requêtes multimédias pour s'étendre aux appareils à grand écran (tels que les ordinateurs portables, les ordinateurs de bureau). ) Composants et grilles.

a la stratégie suivante :

Contenu : décidez de ce qui est le plus important.
Mise en page : donnez la priorité aux conceptions de plus petite largeur.
Amélioration progressive : ajoutez des éléments à mesure que la taille de l'écran augmente.

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

fonctionne comme suit :

"row" doit être contenue dans .container (largeur fixe) ou .container-fluid (100% largeur) afin de lui donner un alignement et un rembourrage appropriés.

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

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

Classes prédéfinies comme .row et .col-xs-. 4 peut être utilisé pour créer rapidement des mixins définis dans le code source Bootstrap. Peut également être utilisé pour créer des mises en page sémantiques.

Créez une gouttière entre les colonnes en définissant l'attribut padding pour "column". En définissant une marge négative pour l'élément .row Cela compense le remplissage défini pour l'élément .container et compense indirectement le remplissage de la "colonne" contenue dans la "ligne".
Négatif La marge est la raison pour laquelle l'exemple ci-dessous dépasse vers l'extérieur. Le contenu des colonnes de la grille s'aligne.

Les colonnes d'un système de grille représentent la plage qu'elles couvrent en spécifiant une valeur comprise entre 1 et 12. Par exemple, trois colonnes de largeur égale peuvent être créées à l'aide de trois .col-xs-4 s.

Si la "colonne" contenue dans une "ligne" est supérieure à 12, les éléments de la "colonne" supplémentaire seront disposés dans leur ensemble dans une autre ligne.

La classe de grille convient aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt, et la classe de grille est remplacée pour les appareils à petit écran. Par conséquent, en appliquant n'importe quel Les classes de grille .col-md-* conviennent aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt et remplacent les classes de grille pour les appareils à petit écran. Par conséquent, il n’existe pas d’application de .col-lg-* sur l’élément, Affecte également les appareils à grand écran.

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

À propos de HTTP/2 server push

Comment NVM gère les différentes versions des nœuds

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!