# Gabarit d'application IRSST

Version 2019

## Le système de grille de Bootstrap

Le système de grille de Bootstrap permet jusqu'à 12 colonnes à travers la page.

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

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

Notez que Flexbox n'est pas supporté dans IE9 et les versions antérieures.

Si vous avez besoin du support d'IE8-9, utilisez Bootstrap 3.

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

| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px)
--- | --- | --- | --- | --- | ---
Préfixe de classe | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
Comportement de la grille | Horizontal en tout temps | Replié au début, horizontal au-dessus des points de rupture
Largeur du conteneur | (auto) | 540px | 720px | 960px | 1140px
Convient pour | Téléphones en mode portrait | Téléphones en mode paysage | Tablettes | Portables | Portables et ordinateurs de bureau
Largeur de la gouttière | 30px (15px de chaque côté de la colonne)

### La structure de base de la grille

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

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
Truc! <!-- Ou laissez Bootstrap déterminer automatiquement l'agencement -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

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.

### Plus d'informations à propos de la grille

#### Les façons natives de modifier la grille

Il est possible de modifier la grille (ou d'autres éléments) à l'aide des utilitaires Bootstraps suivants:

- la disposition
  - à l'aide de flexbox
- la visibilité à l'écran selon leur taille (ou pour tout)
- la visiblité à l'impression
- Les marges et l'espacement (padding)
- L'alignement vertical
- Le float
- le Clearfix
- Ajouter un Offset aux colonnes
- Modifier l'ordre d'affichage par défaut

Beaucoup plus d'utilitaires permettant de modifier le comporterment natif de Bootstrap sont disponibles dans la documentation Bootstrap.