Système de grille

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-widthles 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-4s'applique à sm, md, lg, xlet xxl). 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 .containerpour une largeur de pixel réactive, .container-fluidpour width: 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. Ceci paddingest 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-4quatre). widths 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-0est é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 :

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}-autodes 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 .colet . .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 ligne

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 .rowen tant que raccourci. Avec .row-cols-autovous 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.

<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>

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 .rowet 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);

// Offset with margins
@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-columnsest utilisé pour générer les largeurs (en pourcentage) de chaque colonne individuelle tandis que $grid-gutter-widthdé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-breakpointset $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 %).