Système de grille d' amorçage
Système de grille d'amorçage
Le système de grille de Bootstrap permet jusqu'à 12 colonnes sur la page.
Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez regrouper les colonnes pour créer des colonnes plus larges :
| durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 | durée 1 |
| durée 4 | durée 4 | durée 4 | |||||||||
| durée 4 | durée 8 | ||||||||||
| durée 6 | durée 6 | ||||||||||
| durée 12 | |||||||||||
Le système de grille de Bootstrap est réactif et les colonnes se réorganiseront en fonction de la taille de l'écran : sur un grand écran, le contenu sera peut-être mieux organisé en trois colonnes, mais sur un petit écran, il serait préférable que les éléments de contenu soient empilés. l'un sur l'autre.
Astuce : N'oubliez pas que les colonnes de la grille doivent totaliser douze pour une ligne. Plus que cela, les colonnes s'empileront quelle que soit la fenêtre d'affichage.
Classes de grille
Le système de grille Bootstrap a quatre classes :
xs(pour les téléphones - écrans de moins de 768 pixels de large)sm(pour les tablettes : écrans d'une largeur égale ou supérieure à 768 pixels)md(pour les petits ordinateurs portables - écrans égaux ou supérieurs à 992 pixels de large)lg(pour les ordinateurs portables et les ordinateurs de bureau - écrans égaux ou supérieurs à 1 200 pixels de large)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Conseil : Chaque classe évolue vers le haut, donc si vous souhaitez définir les mêmes largeurs pour xs et sm, il vous suffit de spécifier xs.
Règles du système de grille
Quelques règles du système de grille Bootstrap :
- Les rangées doivent être placées dans une
.container(largeur fixe) ou.container-fluid(pleine largeur) pour un alignement et un rembourrage corrects - Utiliser des 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
.rowet.col-sm-4sont disponibles pour créer rapidement des mises en page de grille - Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le rembourrage. Ce rembourrage est décalé en lignes pour la première et la dernière colonne via une marge négative sur
.rows - 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 de colonne sont en pourcentage, elles sont donc toujours fluides et dimensionnées par rapport à leur élément parent
Structure de base d'une grille bootstrap
Voici une structure de base d'une grille Bootstrap :
<div class="container">
<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>
<div class="row">
...
</div>
</div>
Ainsi, pour créer la mise en page souhaitée, créez un conteneur ( <div
class="container">). Ensuite, créez une ligne ( <div
class="row">). Ensuite, ajoutez le nombre de colonnes souhaité (balises avec les
.col-*-*classes appropriées). Notez que les nombres dans .col-*-*doivent toujours totaliser 12 pour chaque ligne.
Options de grille
Le tableau suivant résume le fonctionnement du système de grille Bootstrap sur plusieurs appareils :
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Exemples
Les chapitres suivants montrent des exemples de systèmes de grille pour différents appareils :