La grille de Bootstrap en pratique
La grille de Bootstrap en pratique
-
Objectifs
- Être capable d’utiliser la grille de Bootstrap
-
La structure de base de la grille Bootstrap
- Commençons donc par créer notre container au sein duquel nous allons travailler :
<div class="container">
</div>- Définir la ligne ou row en anglais est l’élément qui va contenir nos 12 cellules, n’importe quel élément peut importe sa taille peut faire office de rangée. Pour cela il suffit de lui ajouter la classe row.
<div class="container">
<div class="row">
nous avons maintenant accès à douze cellules
</div>
</div>- Définir le nombre de colonnes que chaque élément va occuper dans le tableau, pour cela, il faut ajouter la classe col-nombre de colonnes à un élément HTML qui contiendra nos articles.
- Le total nombre des colonnes occupées par les éléments ne dépasse pas 12, si non l’élément va passer à la ligne suivante!
-
Les différentes largeurs d’écran
- Grid System (Système de grille) est un des concepts les plus importants de Bootstrap. Il vous donne le moyen d’organiser les composants sur une interface et pour que votre website soit compatible avec différents appareils.
- Bootstrap identifie plusieurs largeur d’écran : extra small (xs), small (sm), medium (md), large (lg).
xscorrespond aux téléphonessmaux tablettesmdaux ordinateurs portableslgaux ordinateurs de bureau avec un grand écran- Ces différents type d’écrans sont associés à des Class dans l’écriture HTML pour contraindre les comportements des colonnes dans les différents cas de figures de tailles d’écrans.
.col-xs-#.col-sm-#.col-md-#.col-lg-#-
Les différentes largeurs de colonnes
-
Largeur égale
- L’exemple suivant présente deux dispositions de grille qui s’appliquent à chaque périphérique et fenêtre d’affichage, de
xsà lg. - Ajoutez un nombre illimité de classes sans unité pour chaque point d’arrêt dont vous avez besoin et chaque colonne aura la même largeur.
-
Largeur définie
- La mise en page automatique des colonnes de la grille signifie également que vous pouvez définir la largeur d’une colonne et redimensionner automatiquement les autres.
- Les autres colonnes seront redimensionnées quelle que soit la largeur de la colonne centrale.
-
Largeur variable
- Utilisez des
col-{breakpoint}-autoclasses pour dimensionner les colonnes en fonction de la largeur naturelle de leur contenu.
<div class="container">
<div class="row">
<div class="col bg-danger">
1 Sur 2
</div>
<div class="col bg-success">
2 Sur 2
</div>
</div>
<div class="row">
<div class="col bg-info">
1 Sur 3
</div>
<div class="col bg-warning">
2 Sur 3
</div>
<div class="col bg-primary">
3 Sur 3
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col bg-danger">
1 Sur 3
</div>
<div class="col-6 bg-info">
2 Sur 3 (le plus large)
</div>
<div class="col bg-success">
3 Sur 3
</div>
</div>
<div class="row">
<div class="col bg-success">
1 Sur 3
</div>
<div class="col-5 bg-warning">
2 Sur 3(plus large)
</div>
<div class="col bg-primary">
3 Sur 3
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col bg-danger">
1 Sur 3
</div>
<div class="col-auto bg-info">
2 Sur 3 (Contenu à largeur variable)
</div>
<div class="col bg-success">
3 Sur 3
</div>
</div>
<div class="row">
<div class="col bg-success">
1 Sur 3
</div>
<div class="col-auto bg-warning">
2 Sur 3(Contenu à largeur variable)
</div>
<div class="col col-lg-2 bg-primary">
3 Sur 3
</div>
</div>
</div>