Système de grille Bootstrap 4
Système de grille Bootstrap 4
Le système de grille de Bootstrap permet jusqu'à 12 colonnes sur la page.
Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez regrouper les colonnes pour créer des colonnes plus larges :
| durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 |
| durée 4 | durée 4 | durée 4 | |||||||||
| durée 4 | durée 8 | ||||||||||
| durée 6 | durée 6 | ||||||||||
| durée 12 | |||||||||||
Le système de grille de Bootstrap est réactif et les colonnes se réorganiseront en fonction de la taille de l'écran : sur un grand écran, le contenu sera peut-être mieux organisé en trois colonnes, mais sur un petit écran, il serait préférable que les éléments de contenu soient empilés. l'un sur l'autre.
Classes de grille
Le système de grille Bootstrap 4 comporte cinq classes :
.col-(très petits appareils - largeur d'écran inférieure à 576 pixels).col-sm-(petits appareils - largeur d'écran égale ou supérieure à 576px).col-md-(appareils moyens - largeur d'écran égale ou supérieure à 768 pixels).col-lg-(grands appareils - largeur d'écran égale ou supérieure à 992px).col-xl-(appareils xlarge - largeur d'écran égale ou supérieure à 1200px)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Conseil : Chaque classe est mise à l'échelle, donc si vous souhaitez définir les mêmes largeurs pour
smet md, il vous suffit de spécifier sm.
Règles du système de grille
Quelques règles du système de grille Bootstrap 4 :
- Les rangées doivent être placées dans une
.container(largeur fixe) ou.container-fluid(pleine largeur) pour un alignement et un rembourrage corrects - Utiliser 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 immédiats des lignes
- Des classes prédéfinies telles que
.rowet.col-sm-4sont disponibles pour créer rapidement des mises en page de grille - Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le rembourrage. Ce rembourrage est décalé en lignes pour la première et la dernière colonne via une marge négative sur
.rows - Les colonnes de la grille sont créées en spécifiant le nombre de 12 colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois
.col-sm-4 - Les largeurs de colonne sont en pourcentage, elles sont donc toujours fluides et dimensionnées par rapport à leur élément parent
- La plus grande différence entre Bootstrap 3 et Bootstrap 4 est que Bootstrap 4 utilise désormais flexbox, au lieu de floats. Un gros avantage avec flexbox est que les colonnes de grille sans largeur spécifiée seront automatiquement mises en page en tant que "colonnes de largeur égale" (et de hauteur égale). Exemple : trois éléments avec
.col-smauront chacun automatiquement une largeur de 33,33 % à partir du petit point d'arrêt et au-dessus. Astuce : Si vous souhaitez en savoir plus sur Flexbox, vous pouvez lire notre Tutoriel CSS Flexbox .
Notez que Flexbox n'est pas pris en charge dans IE9 et les versions antérieures.
Si vous avez besoin de la prise en charge d'IE8-9, utilisez Bootstrap 3. Il s'agit de la version la plus stable de Bootstrap, et elle est toujours prise en charge par l'équipe pour les corrections de bogues critiques et les modifications de la documentation. Cependant, aucune nouvelle fonctionnalité ne lui sera ajoutée.
Structure de base d'une grille Bootstrap 4
Voici une structure de base d'une grille Bootstrap 4 :
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Premier exemple : créez une ligne ( <div
class="row">). Ensuite, ajoutez le nombre de colonnes souhaité (balises avec les
.col-*-*classes appropriées). La première étoile (*) représente la réactivité : sm, md, lg ou xl, tandis que la deuxième étoile représente un nombre, qui doit toujours totaliser 12 pour chaque ligne.
Deuxième exemple : au lieu d'ajouter un nombre à chaque col, laissez bootstrap gérer la mise en page, pour créer des colonnes de largeur égale : deux "col"éléments = 50 % de largeur pour chaque col. trois cols = 33,33 % de largeur à chaque col. quatre colonnes = largeur de 25 %, etc. Vous pouvez également utiliser .col-sm|md|lg|xlpour rendre les colonnes réactives.
Options de grille
Le tableau suivant résume le fonctionnement du système de grille Bootstrap 4 sur différentes tailles d'écran :
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Exemples
Les chapitres suivants montrent des exemples de systèmes de grille pour différents appareils et largeurs d'écran :
- Empilé à l'horizontale
- Mise en page extra petite
- Petits appareils
- Appareils moyens
- Gros appareils
- Appareils extra-larges
- Plus d'exemples de grille