Tutoriel Bootstrap 4: système de grille (Grid System)

Bienvenue dans ce nouveau tutoriel  tutoriel Bootstrap

Système de notation Bootstrap 4 est basé sur Flexbox et vous permet d’avoir 12 colonnes dans chaque ligne.
Si vous ne souhaitez pas utiliser les 12 colonnes de chaque ligne, vous pouvez en regrouper 2 ou plus et créer des colonnes plus larges.
La figure ci-dessous montre l’idée générale du système de notation dans Bootstrap 4. Comme vous pouvez le voir, vous pouvez créer des colonnes d’une largeur de 1 sur 12 unités ou 2, 3, etc. de 12 unités :

Le système de notation Bootstrap est entièrement réactif et les colonnes sont automatiquement ajustées et affichent le meilleur mode d’affichage lorsque la largeur de la page change.
Il vous suffit de noter que le nombre maximum de colonnes dans chaque ligne ne doit pas dépasser 12 unités (mais il peut être inférieur à 12 et vous n’avez pas besoin d’utiliser les 12 colonnes).

Formation des classes de grille (Grid Class) dans le système de notation

Bootstrap 4 Grid System a différentes classes pour les colonnes comme suit :

classe col. : Pour les très petits appareils dont la largeur d’écran est égale à 575 pixels ou moins.
Classe .col-sm- : pour les appareils avec de petits écrans (petits appareils) dont la largeur d’écran est de 576 pixels ou plus.
Classe .col-md- : pour les appareils avec un écran moyen (appareils moyens) dont la largeur d’écran est de 768 pixels ou plus.
Classe .col-lg- : pour les appareils avec de grands écrans (grands appareils) dont la largeur d’écran est de 992 pixels ou plus.
Classe .col-xl : pour les appareils avec de très grands écrans (appareils xlarge) dont la largeur d’écran est supérieure à 1200 pixels.

Astuce :
Vous pouvez utiliser les classes ci-dessus en combinaison et en même temps dans un élément et créer des pages complètement réactives et flexibles.

Remarque
L’effet des classes ci-dessus et la priorité de leur importance dans la mise en œuvre est de faible à élevé. C’est-à-dire que les règles des classes plus petites ont la priorité sur les classes plus grandes et sont étendues.

Ainsi, par exemple, si vous souhaitez définir la même largeur pour les classes sm et md, définissez simplement la valeur sm et elle sera automatiquement héritée de la classe supérieure.

Connaître la structure de base du système de notation

Dans les 2 exemples de codes pratiques suivants, nous avons montré la structure de base de la définition et de l’utilisation du système de notation Bootstrap 4. Lisez l’exemple de code. Dans ce qui suit, nous expliquerons chacun:

Explication du premier exemple : Tout d’abord, créez une ligne (code div class=”row”). Ajoutez ensuite le nombre de colonnes souhaité avec la classe .col-– dans chaque ligne. * Le premier dans la classe ci-dessus est le spécificateur d’écran cible pour la largeur de colonne (valeurs sm, md, lg ou xl). Alors que le deuxième * est un nombre indiquant la taille de la colonne de 12 unités au total dans chaque ligne (par exemple, 4 sur 12).

Explication de l’exemple 2 : Comme dans l’exemple précédent, vous créez une ligne parent. Cette fois, au lieu de spécifier un nombre pour chaque .col, laissez Bootstrap gérer le modèle de site et créer des colonnes intermédiaires.
Par exemple, si vous spécifiez 2 colonnes avec la classe .col, la largeur de chaque colonne sera de 50 %. Pour 3 colonnes, la largeur de chaque colonne est de 32 %, et dans le cas de 4 colonnes, elle est de 25 %. Vous pouvez également utiliser les valeurs sm, md, lg ou xl pour contrôler l’affichage dans n’importe quelle taille d’écran.

Dans ce qui suit, nous avons fourni quelques exemples pratiques avec le code source pour montrer différents scénarios de mise en forme des grilles dans Bootstrap 4 dans la pratique.

Comment créer 3 colonnes égales dans Bootstrap 4 :
Dans l’exemple de code pratique ci-dessous, nous avons défini 3 colonnes avec la classe col dans la ligne, chaque colonne aura toujours une largeur de 33 % sur chaque écran et appareil.

Création de 4 colonnes égales réactives dans Bootstrap 4 :

Dans l’exemple de code ci-dessous, nous avons défini 4 colonnes avec une largeur égale de 3 unités sur 12 unités, qui a la classe sm. Les colonnes occuperont toujours 25 % de la largeur des lignes sur toutes les pages, des mobiles aux grands ordinateurs.
Remarque importante : Dans les appareils dont la largeur d’écran est inférieure à 576 pixels, les colonnes sont automatiquement placées les unes sur les autres et chaque colonne occupe toute la largeur de l’écran :

Dans le code d’exemple pratique ci-dessous, nous avons créé deux colonnes de taille inégale (une de 4 unités sur 12 et une de 8 unités sur 12 unités de colonne).
En spécifiant le paramètre sm, nous avons déterminé que la priorité d’exécution de la grille est sur les petits téléphones mobiles et qu’elle est automatiquement transférée à tous les appareils de plus grande largeur.