Grille Bootstrap - Empilé à l'horizontale
Exemple de grille d'amorçage : empilé à l'horizontale
Nous allons créer un système de grille de base qui commence par être empilé sur de très petits appareils, avant de devenir horizontal sur des appareils plus grands.
L'exemple suivant montre une simple disposition à deux colonnes "empilée à horizontale", ce qui signifie qu'il en résultera une répartition 50 %/50 % sur tous les écrans, à l'exception des écrans très petits, qu'il empilera automatiquement (100 %) :
Exemple : empilé à l'horizontale
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Conseil : les nombres dans les .col-sm-*classes indiquent le nombre de colonnes que la div doit couvrir (sur 12). Ainsi, .col-sm-1s'étend sur 1 colonne, .col-sm-4s'étend sur 4 colonnes,
.col-sm-6s'étend sur 6 colonnes, etc.
Remarque : Assurez-vous que la somme totalise toujours 12 !
Conseil : Vous pouvez transformer n'importe quelle mise en page à largeur fixe en une mise en page pleine largeur en modifiant la .containerclasse en.container-fluid :
Exemple : réservoir de liquide
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>