Grilles 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 automatiquement en fonction de la taille de l'écran.
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.
Structure de base d'une grille bootstrap
Voici une structure de base d'une grille Bootstrap :
<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>
D'abord; créer 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.
Ci-dessous, nous avons rassemblé quelques exemples de dispositions de grille Bootstrap de base.
Trois colonnes égales
L'exemple suivant montre comment obtenir trois colonnes de largeur égale en commençant par les tablettes et en évoluant vers les grands ordinateurs de bureau. Sur les téléphones portables ou les écrans de moins de 768 pixels de large, les colonnes s'empileront automatiquement :
Exemple
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Deux colonnes inégales
L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs en commençant par les tablettes et en évoluant vers les grands ordinateurs :
Exemple
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Conseil : vous en apprendrez plus sur les grilles Bootstrap plus loin dans ce didacticiel.