Système de grille Bootstrap5
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 5 est responsive, et les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.
Veuillez vous assurer que le nombre total de colonnes dans chaque ligne est égal ou inférieur à 12.
Classes de grille
Le système de grille Bootstrap 5 dispose des 6 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- Moniteurs de bureau larges - largeur d'écran égale ou supérieure à 992px.
- .col-xl- Moniteurs de bureau très larges - largeur d'écran égale ou supérieure à 1200px.
- .col-xxl- Moniteurs de bureau ultra larges - largeur d'écran égale ou supérieure à 1400px.
Règles du système de grille
Règles du système de grille Bootstrap5 :
- Chaque ligne de grille doit être placée dans un conteneur avec la
.container(largeur fixe) ou.container-fluidclasse (full), afin que certaines marges et paddings soient définis. - Utilisez des lignes pour créer des groupes horizontaux de colonnes.
- 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.rowsmarges négatives sur la ligne définissant le décalage pour les 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.
- Bootstrap 5 et Bootstrap 4 utilisent flexbox au lieu de floats. Un avantage majeur de Flexbox est que les colonnes de grille sans largeur spécifiée seront automatiquement définies commedes 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 |
Moniteur de bureau ultra large ≥1400px |
|
|---|---|---|---|---|---|---|
| Largeur maximale du conteneur | Aucune (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Préfixe de classe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Nombre de colonnes et | 12 | |||||
| Largeur de gouttière | 1.5rem (.75rem de chaque côté d'une colonne) | |||||
| Imbriquable | Oui | |||||
| Ordre des colonnes | Oui | |||||
Nous combinons les classes ci-dessus pour créer des mises en page plus flexibles.
Astuce :Chaque classe s'adapte proportionnellement vers le haut, donc si vous voulez que sm et md aient la même largeur, il vous suffit de spécifier sm.
Structure de base de la grille Bootstrap 5
Le code suivant est la structure de base de la grille Bootstrap 5 :
Structure de base de la grille Bootstrap5
Premier exemple : créez une ligne (<div class="row">). Ensuite, ajoutez les colonnes dont vous avez besoin (.col-*-*défini dans la classe). Le premier astérisque (*) indique l'appareil responsive : sm, md, lg ou xl, le deuxième astérisque (*) indique un nombre, et les nombres dans la même ligne totalisent 12.
Deuxième exemple : au lieu d'ajouter un nombre à chaquecolcolonne, laissez Bootstrap gérer automatiquement la mise en page, chaque colonne de la même ligne a une largeur égale : deux"col"colonnes, chacune aura une largeur de 50%. Trois"col"colonnes, chacune aura une largeur de 33.33%, quatre"col"colonnes, chacune aura une largeur de 25%, et ainsi de suite. De même, vous pouvez utiliser.col-sm|md|lg|xlpour définir les règles responsive des 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 responsive de largeur égale sur les tablettes et les écrans plus grands.Sur les appareils mobiles, c'est-à-dire lorsque la largeur de l'écran est inférieure à 576px, les quatre colonnes seront empilées verticalement.:
Exemple
Essayez-le vous-même »
Colonnes responsives de largeur inégale
L'exemple suivant montre comment créer des colonnes responsives de largeurs inégales sur les tablettes et les écrans plus grands.Sur les appareils mobiles, c'est-à-dire lorsque la largeur de l'écran est inférieure à 576px, les deux colonnes seront empilées verticalement.:
Exemple
Essayez-le vous-même »
Définir la largeur d'une colonne
Si vous définissez uniquement la largeur d'une colonne, les autres colonnes partageront automatiquement la largeur restante à parts égales. L'exemple suivant définit les largeurs de colonnes à 25%, 50%, 25% :
Exemple
Essayez-le vous-même »
Tablette et ordinateur de bureau
L'exemple suivant montre que sur les écrans de bureau, deux colonnes occupent chacune 50% de la largeur ; sur les tablettes, la colonne de gauche occupe 25% et la colonne de droite 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 écran de bureau, écran de bureau ultra large
L'exemple suivant présente des ratios de largeur de 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% sur les tablettes, les ordinateurs de bureau, les grands écrans de bureau et les écrans de bureau très grands, respectivement ; sur les petits appareils tels que les téléphones mobiles, elles s'empileront verticalement.
Exemple
Essayez-le vous-même »
Colonnes imbriquées
L'exemple suivant crée une mise en page à deux colonnes, avec une colonne contenant deux colonnes imbriquées :
Exemple
Essayez-le vous-même »
Colonnes décalées
Les colonnes décalées sont définies via laoffset-*-*classe. Le premier astérisque (*) peut êtresm、md、lg、xl, indiquant le type d'appareil à écran, le second astérisque (*) peut être1à11un nombre.
Pour utiliser les décalages sur les grands écrans, utilisez les.offset-md-*classes. Ces classes augmentent la marge de gauche (margin) d'une colonne de*colonnes, où*la plage est de1à11。
Par exemple : .offset-md-4 déplace .col-md-4 de quatre colonnes de grille vers la droite.
Exemple
Essayez-le vous-même »