Griglia Fondazione - dispositivi di piccole dimensioni
Supponiamo di avere un semplice layout della griglia di piccoli dispositivi, due, rapporto larghezza del 25% e il 75%.
Suggerimento: Definire schermo piccolo dispositivo è inferiore a 40.0625em .
Usiamo piccoli dispositivi .small-* categoria.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Gli esempi che seguono impostare due colonne, il rapporto era 25% e il 75% (Fondazione è mobile prima: Se non specificato, la grande apparecchiatura erediterà .small codice della classe): .small . In loro quei e l'uso "
Esempi
<Div class = "riga">
<Div class = "piccoli-3 colonne" style = "background-color: yellow;">
<P>? Questo tutorial </ p>
</ Div>
<Div class = "piccoli-9 colonne" style = "background-color: rosa;">
<P>? Questo tutorial </ p>
</ Div>
</ Div>
<Div class = "piccoli-3 colonne" style = "background-color: yellow;">
<P>? Questo tutorial </ p>
</ Div>
<Div class = "piccoli-9 colonne" style = "background-color: rosa;">
<P>? Questo tutorial </ p>
</ Div>
</ Div>
Prova »
 | Nota: per garantire che il numero di colonne aggiungere fino a 12! |
|---|
Se è necessario impostare il rapporto 33,3% / 66,6%, è possibile utilizzare .small-4 e .small-8 :
Esempi
<Div class = "riga">
<Div class = "piccoli-4 colonne" style = "background-color: yellow;">
<P>? Questo tutorial </ p>
</ Div>
<Div class = "piccoli-8 colonne" style = "background-color: rosa;">
<P>? Questo tutorial </ p>
</ Div>
</ Div>
<Div class = "piccoli-4 colonne" style = "background-color: yellow;">
<P>? Questo tutorial </ p>
</ Div>
<Div class = "piccoli-8 colonne" style = "background-color: rosa;">
<P>? Questo tutorial </ p>
</ Div>
</ Div>
Prova »