Griglia Fondazione - Attrezzature Media
L'ultimo capitolo abbiamo introdotto dispositivi di piccole dimensioni usiamo .small-* classe per impostare il rapporto di griglia di 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Sul dispositivo di medie dimensioni che si consiglia un rapporto di 50% / 50%.
Suggerimento: La dimensione dello schermo è definita nelle apparecchiature di medie dimensioni 40.0625em per 64.0624em mezzo.
apparecchiature di medie dimensioni .medium-* categoria.
Ora aggiungiamo due su un dispositivo di fascia media:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? Nel caso istituito due colonne, il rapporto era 25% e il 75% (Fondazione è mobile prima: Se non specificato, la grande apparecchiatura erediterà .small codice della classe):
La proporzione di piccoli dispositivi% 25/75% ( .small-3 e .small-9 ). Tuttavia, la percentuale di apparecchiature medie utilizzato è% 50/50% ( .medium-6 e .medium-6 ).
Esempi
<Div class = "piccola-3 medio-6 colonne" style = "background-color: yellow;">
<P> Questo tutorial </ p>
</ Div>
<Div class = "small-9 medie-6 colonne" style = "background-color: rosa;">
<P> Questo tutorial </ p>
</ Div>
</ Div>
Prova »
 | Nota: per garantire che il numero di colonne aggiungere fino a 12! |
|---|
Dispositivo stretto per l'uso su medie dimensioni
L'esempio seguente, specifichiamo .medium-6 di classe (non .small-* ). Ciò indica che nel rapporto medio o grande apparecchiatura del 50% / 50%. Ma su un piccolo dispositivo orizzontalmente impilato (larghezza 100%):
Esempi
<Div class = "medio-6 colonne" style = "background-color: yellow;">
<P> Questo tutorial </ p>
</ Div>
<Div class = "medio-6 colonne" style = "background-color: rosa;">
<P> Questo tutorial </ p>
</ Div>
</ Div>
Prova »