Gabarit d'application IRSST

Les conteneurs

Les conteneurs sont l'élément de mise en page le plus basique de Bootstrap et sont requis. Choisissez entre un conteneur réactif à largeur fixe (c'est-à-dire que max-width change à chaque point d'arrêt) ou à largeur du fluide (c'est-à-dire qu'il est toujours large à 100 %).

Bien que les conteneurs puissent être imbriqués, la plupart des agencements n'ont pas besoin d'un conteneur imbriqué.

<div class="container">
  <!-- Content here -->
</div>

Utilisez .container-fluid pour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.

<div class="container-fluid">
  ...
</div>

La logique des colonnes

Si vous ne voulez pas utiliser les 12 colonnes individuellement, vous pouvez les regrouper pour créer des colonnes plus larges :

Le système de grille de Bootstrap est réactif et les colonnes se réorganisent en fonction de la taille de l'écran : Sur un grand écran, le contenu peut paraître mieux avec un contenu organisé en trois colonnes, mais sur un petit écran, il serait préférable que les éléments de contenu soient empilés les uns sur les autres.

Les classes de la grille

Le système de grille Bootstrap 4 comporte cinq classes :

• .col- (petits appareils - largeur d'écran égale ou supérieure à 576px)
• .col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576px)
• .col-md- (appareils moyens - largeur d'écran égale ou supérieure à 768px)
• .col-lg- (gros appareils - largeur d'écran égale ou supérieure à 992px
• .col-xl- (Périphériques x-large - largeur d'écran égale ou supérieure à 1200px)

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et plus flexibles.

Astuce : Chaque classe évolue, donc si vous souhaitez définir les mêmes largeurs pour sm et md, vous n'avez qu'à spécifier sm.

Les règles de la grille

Quelques règles du système de grille Bootstrap 4 :

• Important! Les rangées doivent être placées à l'intérieur d'un .container (largeur fixe) ou .container-fluid (largeur fluide) pour un alignement et un espacement appropriés.
• Utiliser les lignes pour créer des groupes horizontaux de colonnes
• Le contenu doit être placé dans des colonnes, et seules les colonnes peuvent être des enfants immédiats des lignes
• Des classes prédéfinies telles que .row et .col-sm-4 sont disponibles pour réaliser rapidement des mises en page de grille
• Les colonnes créent des gouttières (espaces entre le contenu des colonnes) par padding. Cet espacement s'opère par lignes, et pour la première et la dernière colonne, par une marge négative sur le .row
• Les colonnes de la grille sont créées en spécifiant le nombre de 12 colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois .col-sm-4
• Les largeurs des colonnes sont exprimées en pourcentage, de sorte qu'elles sont toujours fluides et dimensionnées par rapport à leur élément parent.
• La plus grande différence entre Bootstrap 3 et Bootstrap 4 est que Bootstrap 4 utilise désormais flexbox, au lieu de flotteurs. Un grand avantage de flexbox est que les colonnes de la grille sans largeur spécifiée seront automatiquement mises en forme en "colonnes de largeur égale" (et de hauteur égale). Exemple : Trois éléments avec .col-sm auront chacun automatiquement une largeur de 33,33 %. Astuce : Si vous voulez en savoir plus sur Flexbox, vous pouvez lire le didacticiel CSS Flexbox.

Les options de la grille

Le tableau suivant résume le fonctionnement du système de grille Bootstrap 4 sur différentes tailles d'écran :

La structure de base de la grille

Ce qui suit est une structure de base d'une grille Bootstrap 4 :

Premier exemple : créer une ligne (<div class="row">). Ensuite, ajoutez le nombre de colonnes désiré (balises avec les classes .col-*-* classes) .La première étoile (*) représente la réactivité : sm, md, lg ou xl, tandis que la deuxième étoile représente un nombre, qui doit toujours être égal à 12 pour chaque ligne.

Truc! Deuxième exemple : au lieu d'ajouter un nombre à chaque col, laissez bootstrap gérer la mise en page, pour créer des colonnes de même largeur : deux éléments "col" = 50% de largeur à chaque col.; trois cols = 33.33% e largeur à chaque col.; quatre cols= 25% width, etc. Vous pouvez également utiliser .col-sm|md|lg|xl pour rendre les colonnes responsives.