Système de grille Bootstrap4
Bootstrap fournit un système de grille fluide, réactif et mobile-first. Lorsque la taille de l'écran ou de la fenêtre d'affichage augmente, le système se divise automatiquement en 12 colonnes maximum.
Nous pouvons également définir le nombre de colonnes selon nos besoins :
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Le système de grille de Bootstrap 4 est responsive, et les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.
Classes de grille
Le système de grille de Bootstrap 4 comporte les 5 classes suivantes :
- .col- pour tous les appareils
- .col-sm- tablettes - largeur d'écran égale ou supérieure à 576px
- .col-md- moniteurs de bureau - largeur d'écran égale ou supérieure à 768px)
- .col-lg- grands moniteurs de bureau - largeur d'écran égale ou supérieure à 992px)
- .col-xl- très grands moniteurs de bureau - largeur d'écran égale ou supérieure à 1200px)
Règles du système de grille
Règles du système de grille Bootstrap4 :
- Chaque ligne de la grille doit être placée dans un conteneur qui a la
.container(largeur fixe) ou.container-fluid(pleine largeur) classe, afin que certaines marges et paddings puissent être définis automatiquement. - Utilisez des lignes pour créer des groupes de colonnes horizontaux.
- Le contenu doit être placé dans des colonnes, et seules les colonnes peuvent être des enfants directs des lignes.
- Des classes prédéfinies telles que.rowet.col-sm-4peuvent être utilisées pour créer rapidement des dispositions de grille.
- Les colonnes créent des espaces entre le contenu des colonnes via le padding. Cet espace est obtenu par la marge négative de la classe.rowspour définir le décalage des première et dernière colonnes.
- Les colonnes de la grille sont créées en couvrant les 12 colonnes spécifiées. Par exemple, pour définir trois colonnes égales, vous devez utiliser trois.col-sm-4pour définir.
- La plus grande différence entre Bootstrap 3 et Bootstrap 4 est que Bootstrap 4 utilise désormais flexbox (boîte flexible) au lieu de floats. Un avantage majeur de Flexbox est que les colonnes de grille sans largeur spécifiée seront automatiquement définies surdes colonnes de largeur et de hauteur égales. Si vous souhaitez en savoir plus sur Flexbox, vous pouvez lire notreTutoriel CSS Flexbox 。
Le tableau suivant résume le fonctionnement du système de grille Bootstrap sur différents appareils :
| Appareils extra-petits <576px |
Tablette ≥576px |
Écran de bureau ≥768px |
Grand écran de bureau ≥992px |
Très grand écran de bureau ≥1200px |
|
|---|---|---|---|---|---|
| Largeur maximale du conteneur | Aucune (auto) | 540px | 720px | 960px | 1140px |
| Préfixe de classe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Nombre de colonnes et | 12 | ||||
| Largeur de l’espacement | 30px (15px de chaque côté d’une colonne) | ||||
| Imbriquable | Oui | ||||
| Ordre des colonnes | Oui | ||||
Les classes suivantes peuvent être utilisées ensemble pour créer des mises en page plus flexibles.
Structure de base de la grille Bootstrap 4
Le code suivant est la structure de base de la grille Bootstrap 4 :
Structure de base de la grille Bootstrap4
Premier exemple : Créez une ligne (<div class="row">). Ensuite, ajoutez les colonnes requises (.col-*-*Défini dans la classe). Le premier astérisque (*) représente l'appareil responsive : sm, md, lg ou xl, le second astérisque (*) représente un nombre, et les nombres dans la même ligne totalisent 12.
Deuxième exemple : au lieu d'ajoutercoldes nombres à chaque, laissez Bootstrap gérer automatiquement la mise en page, chaque colonne de la même ligne a une largeur égale : deux"col", chacune aurait une largeur de 50%. Trois"col"chacune aurait une largeur de 33.33%, quatre"col"chacune aurait une largeur de 25%, et ainsi de suite. De même, vous pouvez utiliser.col-sm|md|lg|xlpour définir des règles responsive pour les colonnes.
Ensuite, nous pouvons regarder des exemples.
Créer des colonnes de largeur égale, mise en page automatique Bootstrap
Exemple
Essayez-le vous-même »
Colonnes responsives de largeur égale
L'exemple suivant montre comment créer des colonnes responsives de largeur égale sur les tablettes et les écrans plus grands.Sur les appareils mobiles, c'est-à-dire lorsque la largeur d'écran est inférieure à 576px, les quatre colonnes s'empileront verticalement.:
Exemple
Essayez-le vous-même »
Colonnes responsives de largeur inégale
L'exemple suivant montre comment créer des colonnes responsives de largeur inégale sur les tablettes et les écrans plus grands.Sur les appareils mobiles, c'est-à-dire lorsque la largeur d'écran est inférieure à 576px, les deux colonnes s'empileront verticalement.:
Exemple
Essayez-le vous-même »
Tablette et ordinateur de bureau
L'exemple suivant montre que sur les moniteurs de bureau, les deux colonnes prennent chacune 50% de largeur ; sur les tablettes, la colonne de gauche est de 25% et la colonne de droite de 75% ; sur les petits appareils tels que les téléphones mobiles, elles s'empileront verticalement.
Exemple
Essayez-le vous-même »
Tablette, ordinateur de bureau, grand moniteur de bureau, très grand moniteur de bureau
L'exemple suivant montre des rapports de largeur de 25%/75%, 50%/50%, 33.33%/66.67% et 16.67%/83.33% sur les tablettes, les ordinateurs de bureau, les grands moniteurs de bureau et les très grands moniteurs de bureau, respectivement. Sur les petits appareils tels que les téléphones mobiles, elles s'empileront verticalement.
Exemple
Essayez-le vous-même »
Colonnes décalées
Les colonnes décalées sont définies viaoffset-*-*classes. Le premier astérisque (*) peut êtresm、md、lg、xl, indiquant le type d'appareil à écran, et le second astérisque (*) peut être1à11nombres.
Pour utiliser les décalages sur les écrans de grande taille, utilisez les.offset-md-*classes. Ces classes augmenteront la marge gauche (margin) d'une colonne de*colonnes, où*la plage va de1à11。
Par exemple : .offset-md-4 déplace .col-md-4 vers la droite de quatre colonnes de grille.
Exemple
Essayez-le vous-même »