Fondation Grid - petits appareils
Supposons que nous ayons une mise en page simple grille sur les petits appareils, dont deux, le rapport largeur de 25% et 75%.
Astuce: Définir petit écran de l' appareil est inférieure à 40.0625em .
Nous utilisons les petits appareils .small-* catégorie.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Les exemples suivants mis en place deux colonnes, le rapport était de 25% et 75% (Fondation est le premier mobile: Si non spécifié, le grand équipement va hériter .small code de classe): .small en eux Ceux et l' utilisation ".
Exemples
<Class Div = "ligne">
<Class Div = "small-3 colonnes" style = "background-color: yellow;">
<P>? Ce tutoriel </ p>
</ Div>
<Class Div = "small-9 style colonnes" = "background-color: rose;">
<P>? Ce tutoriel </ p>
</ Div>
</ Div>
<Class Div = "small-3 colonnes" style = "background-color: yellow;">
<P>? Ce tutoriel </ p>
</ Div>
<Class Div = "small-9 style colonnes" = "background-color: rose;">
<P>? Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »
 | Remarque: Pour veiller à ce que le nombre de colonnes ajouter jusqu'à 12! |
|---|
Si vous avez besoin de mettre en place 33,3% Ratio / 66,6%, vous pouvez utiliser .small-4 et .small-8 :
Exemples
<Class Div = "ligne">
<Class Div = "small-4 colonnes" style = "background-color: yellow;">
<P>? Ce tutoriel </ p>
</ Div>
<Class Div = "small-8 style colonnes" = "background-color: rose;">
<P>? Ce tutoriel </ p>
</ Div>
</ Div>
<Class Div = "small-4 colonnes" style = "background-color: yellow;">
<P>? Ce tutoriel </ p>
</ Div>
<Class Div = "small-8 style colonnes" = "background-color: rose;">
<P>? Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »