quelles sont les unités du système de grille bootstrap

1. Qu'est-ce que Bootstrap

Bootstrap fournit un ensemble de barrières fluides réactives et adaptées aux appareils mobiles. , à mesure que la taille de l'écran ou de la fenêtre augmente, le système se divisera automatiquement en 12 colonnes maximum. 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 sur les appareils à petit écran (tels que les appareils mobiles, les tablettes), puis utilise des requêtes multimédias pour s'étendre aux composants et aux grilles sur les appareils à grand écran (tels que les ordinateurs portables, les ordinateurs de bureau).

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.

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

2. Principe de fonctionnement

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

fonctionne comme ceci :

"ligne" doit être contenue dans un .container (largeur fixe) ou .container-fluid (100% de largeur) afin de lui donner un bon alignement (alignement) et le rembourrage.

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

Crée un ensemble de "colonnes" dans le sens horizontal à travers des "lignes". Cependant, la somme du nombre de colonnes ne peut pas dépasser le nombre total de colonnes divisées de manière égale (en cas de dépassement, l'excédent sera affiché sur de nouvelles lignes) et la valeur par défaut est 12. (Des paramètres personnalisés peuvent être définis en utilisant Less ou Sass), comme suit :

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

Votre contenu doit être placé dans la "colonne", et seule la "colonne" peut être utilisée comme "élément enfant direct". .

Les classes prédéfinies comme .row et .col-xs-4 peuvent être utilisées 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 une sémantique

Créer un. espace entre les colonnes en définissant l'attribut padding pour l'élément "column" et en le compensant en définissant une marge négative pour l'élément .row. Le remplissage défini par l'élément compense indirectement le remplissage de la "colonne" contenue dans la "ligne". La valeur négative de la marge est la raison pour laquelle l'exemple suivant dépasse vers l'extérieur. Le contenu de la colonne de la grille est disposé en ligne. Les colonnes du système de grille sont représentées par la plage qu'elles couvrent. Par exemple, trois colonnes de même largeur peuvent en utiliser trois. .col. -xs-4 à créer.

Si une "ligne" contient plus de 12 "colonnes", les éléments des "colonnes" supplémentaires seront traités dans leur ensemble sur une nouvelle ligne <.>

La classe grille convient aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt, et la classe grille est remplacée pour les appareils à petit écran. Par conséquent, appliquez n'importe quel .col-md- sur l'élément. *La classe de grille s'applique 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, tout .col-lg-* appliqué sur un élément n'affecte pas les appareils à grand écran. eh bien

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!