Grille Bootstrap 5

Système de grille Bootstrap 5

Le système de grille Bootstrap est construit avec flexbox et permet au maximum 12 colonnes sur la page.

Si vous ne souhaitez pas utiliser séparément toutes les 12 colonnes, vous pouvez les combiner pour créer des colonnes plus larges :

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Le système de grille répond rapidement et les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.

Assurez-vous que la somme soit égale ou inférieure à 12 (si vous n'utilisez pas tous les 12 colonnes disponibles).

Classes de grille

Le système de grille Bootstrap 5 possède six classes :

  • .col- (appareils ultra-petits - largeur d'écran inférieure à 576px)
  • .col-sm- (appareils de petite taille - largeur d'écran égale ou supérieure à 576px)
  • .col-md- (appareils de taille moyenne - largeur d'écran égale ou supérieure à 768 pixels)
  • .col-lg- (appareils de grande taille - largeur d'écran égale ou supérieure à 992 pixels)
  • .col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1200px)
  • .col-xxl- (appareils xxlarge - largeur d'écran égale ou supérieure à 1400px)

Vous pouvez combiner ces classes pour créer des mises en page plus dynamiques et flexibles.

Astuce :Chaque classe est agrandie proportionnellement, donc si vous voulez créer sm et md Pour définir des largeurs égales, vous n'avez qu'à spécifier sm。

La structure de base de la grille Bootstrap 5

Voici la structure de base de la grille Bootstrap 5 :

<!-- Contrôle la largeur des colonnes ainsi que leur affichage sur différents appareils -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- ou laissez Bootstrap gérer automatiquement le layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Premier exemple : créer une ligne (<div class="row">). Ajoutez ensuite le nombre de colonnes nécessaires (avec des .col-*-* étiquette de classe). La première étoile (*) représente la réactivité : sm, md, lg, xl ou xxl, et la deuxième étoile représente le nombre, la somme de chaque ligne doit être de 12.

Deuxième exemple : ne pas donner à chaque col Ajouter un nombre, laissez Bootstrap gérer le layout pour créer des colonnes égales : deux "col" Élément = chaque col de largeur de 50%, et trois cols = chaque col de largeur de 33.33%. Quatre colonnes = 25% de largeur, etc. Vous pouvez également utiliser .col-sm|md|lg|xl|xxl Rendre les colonnes responsives.

Nous avons rassemblé ici quelques exemples de base de mise en page de grille Bootstrap 5.

Colonnes divisées en trois

L'exemple suivant montre comment créer trois colonnes égales sur tous les appareils et largeurs d'écran :

Exemple

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez-le vous-même

Colonnes responsives

L'exemple suivant montre comment créer quatre colonnes égales à partir d'une tablette et s'étendre à un grand bureau.Sur les téléphones ou les écrans d'une largeur inférieure à 576px, les colonnes s'empillement automatiquement :

Exemple

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Essayez-le vous-même

Deux colonnes responsives inégales

L'exemple suivant montre comment obtenir deux colonnes de largeur différente sur une tablette et s'étendre à un grand bureau :

Exemple

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Essayez-le vous-même

Astuce :Vous apprendrez à la fin de ce tutoriel sur Système de grille . Plus de contenu.