Bootstrap Grille Exemple: Stacked à horizontale
Nous allons créer un système de grille de base qui commence à empiler sur les mobiles / tablettes (petits appareils), avant de devenir horizontale sur les postes de travail (/ gros appareils de moyenne).
L'exemple suivant montre un simple "empilés à horizontal" disposition en deux colonnes, ce qui signifie qu'il se traduira par une / 50% scission de 50% sur tous les écrans, sauf pour les petits écrans supplémentaires, qui sera automatiquement pile (100%):
Exemple: Stacked à 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> Essayez - le vous - même » Astuce: Les chiffres dans les .col-sm-* les classes indique le nombre de colonnes de la div devrait couvrir (sur 12). Donc, .col-sm-1 travées 1 colonne, .col-sm-4 travées 4 colonnes, .col-sm-6 travées 6 colonnes, etc.
Remarque: Assurez - vous que la somme ajoute toujours à 12!
Astuce: Vous pouvez activer toute mise en page à largeur fixe dans une mise en page pleine largeur en changeant la .container classe à .container-fluid :
Exemple: conteneur 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> Essayez - le vous - même »