Grille d'amorçage - Petits appareils
Exemple de grille d'amorçage : petits appareils
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Supposons que nous ayons une mise en page simple avec deux colonnes. Nous voulons que les colonnes soient divisées 25 %/75 % pour les petits appareils.
Conseil : Les petits appareils sont définis comme ayant une largeur d'écran comprise entre 768 pixels et 991 pixels .
Pour les petits appareils, nous utiliserons les .col-sm-*classes.
Nous ajouterons les classes suivantes à nos deux colonnes :
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Maintenant, Bootstrap va dire "à la petite taille, recherchez les classes avec -sm- et utilisez-les".
L'exemple suivant se traduira par une répartition de 25 %/75 % sur les petits (et moyens et grands) appareils. Sur les très petits appareils, il s'empilera automatiquement (100 %) :
Exemple
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Remarque : Assurez-vous que la somme totalise toujours 12.
Pour une répartition 33,3 %/66,6 %, vous utiliseriez .col-sm-4et.col-sm-8 :
Exemple
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Le chapitre suivant montre comment ajouter un pourcentage de répartition différent pour les appareils de taille moyenne.