Bootstrap - Système de Grille : Un Guide Amical pour les Débutants

Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du Système de Grille de Bootstrap. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai là avec vous, expliquant tout étape par étape. Alors, prenez une tasse de café (ou de thé, si vous préférez), et plongeons dedans !

Qu'est-ce que le Système de Grille de Bootstrap ?

Avant de commencer, laissez-moi vous raconter une petite histoire. Imaginez que vous essayez d'organiser votre étagère à livres. Vous voulez ranger vos livres de manière ordonnée, mais ils sont de toutes tailles. Frustrant, n'est-ce pas ? Eh bien, le Système de Grille de Bootstrap est comme une étagère magique qui organise automatiquement votre contenu, peu importe sa taille ou sa forme !

En termes de conception web, le Système de Grille est un outil de mise en page puissant qui vous aide à créer des pages web réactives et bien structurées. C'est comme avoir un assistant personnel qui arrange le contenu de votre page web parfaitement, que ce soit sur un grand écran d'ordinateur de bureau ou un petit écran de smartphone.

Exemple de Base

Commençons par un exemple simple pour nous familiariser. Voici une structure de base du Système de Grille de Bootstrap :

<div class="container">
<div class="row">
<div class="col-sm">
Une des trois colonnes
</div>
<div class="col-sm">
Une des trois colonnes
</div>
<div class="col-sm">
Une des trois colonnes
</div>
</div>
</div>

Que se passe-t-il ici ? Exploquons cela :

1. Nous commençons par une classe container. C'est comme la boîte extérieure qui contient tout.
2. À l'intérieur du conteneur, nous avons une classe row. Pensez à cela comme une étagère dans notre analogie de l'étagère à livres.
3. Dans la rangée, nous avons trois classes col-sm. Ceux-ci sont nos livres, alignés côte à côte sur l'étagère.

Fonctionnement

Le Système de Grille de Bootstrap est basé sur une mise en page de 12 colonnes. Pourquoi 12 ? Eh bien, c'est un nombre magique en conception web car il est divisible par 1, 2, 3, 4 et 6, ce qui nous offre beaucoup de flexibilité !

Voici une représentation visuelle :

1	2	3	4	5	6	7	8	9	10	11	12
Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne	Colonne

Chacune de ces colonnes peut être combinée pour créer des zones de contenu plus larges. Par exemple, vous pourriez avoir une mise en page avec deux colonnes de 6 unités chacune, ou trois colonnes de 4 unités chacune. C'est comme jouer avec des blocs de construction !

Colonnes Auto-ajustées

Maintenant, regardons quelques astuces sympas. Bootstrap peut automatiquement gérer les largeurs des colonnes pour vous. Regardez ceci :

<div class="container">
<div class="row">
<div class="col">
1 sur 2
</div>
<div class="col">
2 sur 2
</div>
</div>
<div class="row">
<div class="col">
1 sur 3
</div>
<div class="col">
2 sur 3
</div>
<div class="col">
3 sur 3
</div>
</div>
</div>

Dans cet exemple, nous ne spécifions pas les largeurs des colonnes. Bootstrap est suffisamment intelligent pour diviser l'espace également entre les colonnes. C'est comme avoir un robot qui arrange votre étagère à livres pour vous !

Largeurs Égales

Voulez-vous que toutes les colonnes aient la même largeur, indépendamment du contenu ? Très simple !

<div class="container">
<div class="row">
<div class="col">
1 sur 3
</div>
<div class="col">
2 sur 3 (plus large)
</div>
<div class="col">
3 sur 3
</div>
</div>
</div>

Même si la colonne du milieu a plus de contenu, toutes les trois colonnes resteront de largeur égale. C'est comme avoir des livres extensibles qui s'ajustent toujours parfaitement sur votre étagère !

Définir la Largeur d'une Colonnes

Parfois, vous souhaitez que'une colonne ait une largeur spécifique et que les autres s'ajustent automatiquement. Voici comment faire :

<div class="container">
<div class="row">
<div class="col">
1 sur 3
</div>
<div class="col-6">
2 sur 3 (plus large)
</div>
<div class="col">
3 sur 3
</div>
</div>
</div>

Dans ce cas, la colonne du milieu occupera 6 unités (la moitié de la largeur), et les deux autres colonnes partageront équitablement l'espace restant.

Contenu de Largeur Variable

Que faire si vous souhaitez qu'une colonne ajuste sa largeur en fonction de son contenu ? Bootstrap a une solution :

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 sur 3
</div>
<div class="col-md-auto">
Contenu de largeur variable
</div>
<div class="col col-lg-2">
3 sur 3
</div>
</div>
</div>

La classe col-md-auto permet à cette colonne de grandir ou de se rétrécir en fonction de son contenu. C'est comme avoir un livre qui peut changer sa taille pour s'ajuster parfaitement entre ses voisins !

Classes Réactives

Passons maintenant à la mise en page réactive. Bootstrap utilise des points de rupture pour ajuster la mise en page en fonction de la taille de l'écran. Voici les principaux points de rupture :

Point de rupture	Préfixe de classe	Dimensions
Extra small	Aucun	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Utilisation de Tous les Points de rupture

Voici comment utiliser ces points de rupture :

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

Cette mise en page restera la même sur toutes les tailles d'écran. C'est comme une étagère qui a l'air la même que vous la regardiez de loin ou de près !

Stacking to Horizontal

Mais que faire si nous voulons que notre mise en page change en fonction de la taille de l'écran ? Regardez ceci :

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

Sur les écrans small et plus grands, ces colonnes seront côte à côte. Sur les écrans extra small, elles se superposeront verticalement. C'est comme une étagère qui peut se transformer en tour de livres lorsque l'espace est limité !

Mélange et Assortiment

Vous pouvez également mélanger et assortir les tailles de colonnes pour différentes tailles d'écran :

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Cette mise en page aura un aspect différent sur les petits écrans par rapport aux écrans medium et plus grands. C'est comme une étagère qui change de forme !

Colonnes de Rangée

Voulez-vous créer des colonnes de largeur égale rapidement ? Utilisez les colonnes de rangée :

<div class="container">
<div class="row row-cols-2">
<div class="col">Colonne</div>
<div class="col">Colonne</div>
<div class="col">Colonne</div>
<div class="col">Colonne</div>
</div>
</div>

Cela crée une rangée avec deux colonnes, indépendamment du nombre de col divs que vous avez. C'est comme une étagère qui arrange toujours vos livres par paires !

Nesting

Pour finir, vous pouvez imbriquer des grilles à l'intérieur d'autres grilles :

<div class="container">
<div class="row">
<div class="col-sm-3">
Niveau 1 : .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Niveau 2 : .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Niveau 2 : .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Cela crée une grille à l'intérieur d'une autre grille. C'est comme avoir de petites étagères à l'intérieur d'une grande étagère !

Et voilà, amis ! Vous avez appena fait vos premiers pas dans le monde du Système de Grille de Bootstrap. Souvenez-vous, la pratique rend parfait. Essayez de jouer avec ces exemples, mélangez et assortez différentes classes, et voyez ce qui se passe. Avant de savoir, vous serez à créer de magnifiques mises en page réactives comme un pro !

Bonne programmation, et puissent vos pages web toujours être parfaitement organisées !

Credits: Image by storyset