Bootstrap 4 grilles
Système de grille Bootstrap 4
Le système de grille de Bootstrap est construit avec flexbox et 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 est réactif et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran.
Assurez-vous que la somme totalise 12 ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles).
Classes de grille
Le système de grille Bootstrap 4 comporte cinq classes :
.col-(très petits appareils - largeur d'écran inférieure à 576 pixels).col-sm-(petits appareils - largeur d'écran égale ou supérieure à 576px).col-md-(appareils moyens - largeur d'écran égale ou supérieure à 768 pixels).col-lg-(grands appareils - largeur d'écran égale ou supérieure à 992px).col-xl-(appareils xlarge - 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 flexibles.
Conseil : Chaque classe est mise à l'échelle, donc si vous souhaitez définir les mêmes largeurs pour
smet md, il vous suffit de spécifier sm.
Structure de base d'une grille Bootstrap 4
Voici une structure de base d'une grille Bootstrap 4 :
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Premier exemple : créez une ligne ( <div
class="row">). Ensuite, ajoutez le nombre de colonnes souhaité (balises avec les
.col-*-*classes appropriées). 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 devrait totaliser 12 pour chaque ligne.
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 largeur égale : deux "col"éléments = 50 % de largeur pour chaque col. trois cols = 33,33 % de largeur à chaque col. quatre colonnes = largeur de 25 %, etc. Vous pouvez également utiliser .col-sm|md|lg|xlpour rendre les colonnes réactives.
Ci-dessous, nous avons rassemblé quelques exemples de dispositions de base de la grille Bootstrap 4.
Trois colonnes égales
L'exemple suivant montre comment créer trois colonnes de largeur égale, sur tous les appareils et toutes les largeurs d'écran :
Exemple
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Colonnes réactives
L'exemple suivant montre comment créer quatre colonnes de largeur égale en commençant par des tablettes et en évoluant vers des ordinateurs de bureau très volumineux. Sur les téléphones portables ou les écrans de moins de 576 pixels de large, les colonnes s'empileront automatiquement les unes sur les autres :
Exemple
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Deux colonnes réactives inégales
L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs en commençant par des tablettes et en évoluant vers de grands bureaux supplémentaires :
Exemple
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Astuce : vous en apprendrez plus sur les grilles Bootstrap 4 plus loin dans ce didacticiel.