Système de grille
Utilisez notre puissante grille flexbox mobile-first pour créer des mises en page de toutes formes et tailles grâce à un système à douze colonnes, six niveaux réactifs par défaut, des variables et mixins Sass et des dizaines de classes prédéfinies.
Exemple
Le système de grille de Bootstrap utilise une série de conteneurs, de lignes et de colonnes pour mettre en page et aligner le contenu. Il est construit avec flexbox et est entièrement réactif. Vous trouverez ci-dessous un exemple et une explication détaillée de la manière dont le système de grille s'articule.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
L'exemple ci-dessus crée trois colonnes de largeur égale sur tous les appareils et fenêtres à l'aide de nos classes de grille prédéfinies. Ces colonnes sont centrées dans la page avec le parent .container
.
Comment ça fonctionne
En le décomposant, voici comment le système de grille se réunit :
-
Notre grille prend en charge six points d'arrêt réactifs . Les points d'arrêt sont basés sur
min-width
les requêtes multimédias, ce qui signifie qu'ils affectent ce point d'arrêt et tous ceux qui le précèdent (par exemple,.col-sm-4
s'applique àsm
,md
,lg
,xl
etxxl
). Cela signifie que vous pouvez contrôler la taille et le comportement des conteneurs et des colonnes à chaque point d'arrêt. -
Les conteneurs centrent et remplissent horizontalement votre contenu. À utiliser
.container
pour une largeur de pixel réactive,.container-fluid
pourwidth: 100%
toutes les fenêtres et tous les appareils, ou un conteneur réactif (par exemple,.container-md
) pour une combinaison de largeurs de fluide et de pixel. -
Les lignes sont des wrappers pour les colonnes. Chaque colonne a une horizontale
padding
(appelée gouttière) pour contrôler l'espace entre elles. Cecipadding
est ensuite contrecarré sur les lignes avec des marges négatives pour garantir que le contenu de vos colonnes est visuellement aligné sur le côté gauche. Les lignes prennent également en charge les classes de modificateurs pour appliquer uniformément les classes de taille de colonne et de gouttière pour modifier l'espacement de votre contenu. -
Les colonnes sont incroyablement flexibles. Il y a 12 colonnes de modèles disponibles par ligne, ce qui vous permet de créer différentes combinaisons d'éléments qui s'étendent sur n'importe quel nombre de colonnes. Les classes de colonne indiquent le nombre de colonnes de modèle à couvrir (par exemple,
col-4
quatre).width
s sont définis en pourcentages afin que vous ayez toujours le même dimensionnement relatif. -
Les gouttières sont également réactives et personnalisables. Les classes de gouttière sont disponibles pour tous les points d'arrêt, avec toutes les mêmes tailles que notre espacement de marge et de rembourrage . Modifiez les gouttières horizontales avec des
.gx-*
classes, les gouttières verticales avec.gy-*
ou toutes les gouttières avec des.g-*
classes..g-0
est également disponible pour enlever les gouttières. -
Les variables, cartes et mixins Sass alimentent la grille. Si vous ne souhaitez pas utiliser les classes de grille prédéfinies dans Bootstrap, vous pouvez utiliser la source Sass de notre grille pour créer la vôtre avec un balisage plus sémantique. Nous incluons également certaines propriétés personnalisées CSS pour utiliser ces variables Sass pour une flexibilité encore plus grande pour vous.
Soyez conscient des limitations et des bogues autour de flexbox , comme l ' impossibilité d' utiliser certains éléments HTML comme conteneurs flex .
Options de grille
Le système de grille de Bootstrap peut s'adapter aux six points d'arrêt par défaut et à tous les points d'arrêt que vous personnalisez. Les six niveaux de grille par défaut sont les suivants :
- Très petit (xs)
- Petit (p.m.)
- Moyen (md)
- Grand (lg)
- Très grand (xl)
- Très très grand (xxl)
Comme indiqué ci-dessus, chacun de ces points d'arrêt a son propre conteneur, un préfixe de classe unique et des modificateurs. Voici comment la grille change entre ces points d'arrêt :
xs <576px |
≥576px _ |
MD ≥768px |
lg ≥992px |
XL ≥1200px |
XXL ≥1400px |
|
---|---|---|---|---|---|---|
Récipientmax-width |
Aucun (auto) | 540px | 720px | 960px | 1140px | 1320px |
Préfixe de classe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# de colonnes | 12 | |||||
Largeur de gouttière | 1,5 rem (0,75 rem à gauche et à droite) | |||||
Gouttières sur mesure | Oui | |||||
Emboîtable | Oui | |||||
Ordre des colonnes | Oui |
Colonnes de mise en page automatique
Utilisez des classes de colonnes spécifiques aux points d'arrêt pour un dimensionnement facile des colonnes sans classe numérotée explicite comme .col-sm-6
.
Largeur égale
Par exemple, voici deux dispositions de grille qui s'appliquent à chaque appareil et fenêtre d'affichage, de xs
à xxl
. Ajoutez n'importe quel nombre de classes sans unité pour chaque point d'arrêt dont vous avez besoin et chaque colonne aura la même largeur.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Définition d'une largeur de colonne
La mise en page automatique des colonnes de la grille flexbox signifie également que vous pouvez définir la largeur d'une colonne et que les colonnes sœurs se redimensionnent automatiquement autour d'elle. Vous pouvez utiliser des classes de grille prédéfinies (comme indiqué ci-dessous), des mixins de grille ou des largeurs en ligne. Notez que les autres colonnes seront redimensionnées quelle que soit la largeur de la colonne centrale.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Contenu à largeur variable
Utilisez col-{breakpoint}-auto
des classes pour dimensionner les colonnes en fonction de la largeur naturelle de leur contenu.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Cours réactifs
La grille de Bootstrap comprend six niveaux de classes prédéfinies pour la création de mises en page réactives complexes. Personnalisez la taille de vos colonnes sur des appareils très petits, petits, moyens, grands ou très grands comme bon vous semble.
Tous les points d'arrêt
Pour les grilles identiques du plus petit appareil au plus grand, utilisez les classes .col
et . .col-*
Spécifiez une classe numérotée lorsque vous avez besoin d'une colonne de taille particulière ; sinon, n'hésitez pas à vous en tenir à .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Empilé à l'horizontale
À l' aide d'un seul ensemble de .col-sm-*
classes, vous pouvez créer un système de grille de base qui commence empilé et devient horizontal au petit point d'arrêt ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mélanger et assortir
Vous ne voulez pas que vos colonnes s'empilent simplement dans certains niveaux de grille ? Utilisez une combinaison de différentes classes pour chaque niveau selon vos besoins. Voir l'exemple ci-dessous pour une meilleure idée de la façon dont tout cela fonctionne.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Colonnes de lignes
Utilisez les .row-cols-*
classes réactives pour définir rapidement le nombre de colonnes qui rendent le mieux votre contenu et votre mise en page. Alors que les classes normales .col-*
s'appliquent aux colonnes individuelles (par exemple, .col-md-4
), les classes de colonnes de ligne sont définies sur le parent .row
par défaut pour les colonnes contenues. Avec .row-cols-auto
vous pouvez donner aux colonnes leur largeur naturelle.
Utilisez ces classes de colonnes de lignes pour créer rapidement des dispositions de grille de base ou pour contrôler les dispositions de vos cartes et les remplacer si nécessaire au niveau des colonnes.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Vous pouvez également utiliser le mixin Sass qui l'accompagne row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Nidification
Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row
et un ensemble de colonnes dans une colonne .col-sm-*
existante . .col-sm-*
Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent jusqu'à 12 colonnes ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Toupet
Lorsque vous utilisez les fichiers source Sass de Bootstrap, vous avez la possibilité d'utiliser des variables Sass et des mixins pour créer des mises en page personnalisées, sémantiques et réactives. Nos classes de grille prédéfinies utilisent ces mêmes variables et mixins pour fournir toute une suite de classes prêtes à l'emploi pour des mises en page réactives rapides.
variables
Les variables et les cartes déterminent le nombre de colonnes, la largeur de la gouttière et le point de requête multimédia auquel commencer les colonnes flottantes. Nous les utilisons pour générer les classes de grille prédéfinies documentées ci-dessus, ainsi que pour les mixins personnalisés répertoriés ci-dessous.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mélanges
Les mixins sont utilisés conjointement avec les variables de grille pour générer du CSS sémantique pour les colonnes de grille individuelles.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Exemple d'utilisation
Vous pouvez modifier les variables avec vos propres valeurs personnalisées ou simplement utiliser les mixins avec leurs valeurs par défaut. Voici un exemple d'utilisation des paramètres par défaut pour créer une mise en page à deux colonnes avec un espace entre les deux.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Personnalisation de la grille
En utilisant nos variables et cartes Sass de grille intégrées, il est possible de personnaliser complètement les classes de grille prédéfinies. Modifiez le nombre de niveaux, les dimensions de la requête multimédia et la largeur des conteneurs, puis recompilez.
Colonnes et gouttières
Le nombre de colonnes de la grille peut être modifié via les variables Sass. $grid-columns
est utilisé pour générer les largeurs (en pourcentage) de chaque colonne individuelle tandis que $grid-gutter-width
définit la largeur des gouttières de colonne.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Niveaux de grille
Au-delà des colonnes elles-mêmes, vous pouvez également personnaliser le nombre de niveaux de grille. Si vous ne vouliez que quatre niveaux de grille, vous mettriez à jour le $grid-breakpoints
et $container-max-widths
à quelque chose comme ceci :
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Lorsque vous apportez des modifications aux variables ou aux cartes Sass, vous devez enregistrer vos modifications et recompiler. Cela produira un tout nouvel ensemble de classes de grille prédéfinies pour les largeurs de colonne, les décalages et l'ordre. Les utilitaires de visibilité réactifs seront également mis à jour pour utiliser les points d'arrêt personnalisés. Assurez-vous de définir les valeurs de grille dans px
(pas rem
, em
, ou %
).