Griglia responsive
W3.CSS supporta una griglia liquido reattivo 12 colonne.
Ridimensionare la pagina per vedere l'effetto!
Questa parte occuperà 12 colonne su un piccolo schermo, 4 da uno schermo medio e 3 su un grande schermo.
Questa parte occuperà 12 colonne su un piccolo schermo, 8 su uno schermo medio e 9 su un grande schermo.
Esempio
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div> Prova tu stesso " Righe responsive
sistema di griglia di W3.CSS è sensibile, e le colonne si ri-organizzare automaticamente in base alle dimensioni dello schermo: Su un grande schermo potrebbe sembrare meglio con i contenuti organizzati in tre colonne, ma su un piccolo schermo che sarebbe stato meglio se il contenuto articoli sono stati impilati uno sopra l'altro.
Le colonne devono risiedere all'interno di una riga di essere pienamente reattivo.
| Classe | Descrizione |
|---|---|
| w3-fila | Definisce un contenitore padding-meno per le colonne reattivi. |
| w3-row-padding | Definisce un contenitore imbottito per colonne reattivi. |
| w3-Col | Definisce una colonna con le sottoclassi |
w3-Col ha le seguenti classi di sub:
Colonne per schermi di piccole dimensioni (telefoni tipici smart):
| Classe | Descrizione |
|---|---|
| s1 | Definisce 1 di 12 colonne (larghezza: 08,33%) per piccoli schermi |
| s2 | Definisce 2 di 12 colonne (larghezza: 16,66%) per piccoli schermi |
| s3 | Definisce 3 su 12 colonne (larghezza: 25,00%) per piccoli schermi |
| s4 | Definisce 4 su 12 colonne (larghezza: 33,33%) per piccoli schermi |
| s5-s11 | |
| s12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per piccoli schermi |
Colonne per gli schermi di media (compresse tipico):
| Classe | Descrizione |
|---|---|
| m1 | Definisce 1 di 12 colonne (larghezza: 08,33%) per schermi di media |
| m2 | Definisce 2 di 12 colonne (larghezza: 16,66%) per schermi di media |
| m3 | Definisce 3 su 12 colonne (larghezza: 25,00%) per schermi di media |
| m4 | Definisce 4 su 12 colonne (larghezza: 33,33%) per schermi di media |
| M5-m11 | |
| m12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per gli schermi di media |
Colonne per grandi schermi (computer portatili tipici):
| Classe | Descrizione |
|---|---|
| l1 | Definisce 1 di 12 colonne (larghezza: 08,33%) per i grandi schermi |
| l2 | Definisce 2 di 12 colonne (larghezza: 16,66%) per i grandi schermi |
| l3 | Definisce 3 su 12 colonne (larghezza: 25,00%) per i grandi schermi |
| l4 | Definisce 4 su 12 colonne (larghezza: 33,33%) per i grandi schermi |
| L5-L11 | |
| L12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per schermi di grandi dimensioni) |
Le classi sopra possono essere combinati per creare layout più dinamici e flessibili.
Ogni classe scale up, quindi se si desidera impostare la stessa larghezza per gli schermi di piccole, medie e grandi, avete solo bisogno di specificare la piccola classe. E se si desidera che la stessa larghezza sugli schermi di medie e grandi dimensioni, è sufficiente specificare la classe media.
Tuttavia, se si utilizza solo medie e / o grandi classi, la larghezza sarà sempre trasformare al 100% su schermi di piccole dimensioni.
Nota: Il numero di colonne deve sempre aggiungere fino a 12 per ogni riga (6 + 6, 3 + 3 + 6, 9 + 3, ecc)!
Due colonne uguali
Due colonne della stessa larghezza (50% / 50%) su tutte le dimensioni dello schermo:
s6
s6
Esempio
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div> Prova tu stesso " Due colonne disuguali
Due colonne di larghezza diversa (25% / 75%) su tutte le dimensioni dello schermo:
s3
S9
Esempio
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Prova tu stesso " Tre colonne uguali
Tre colonne della stessa larghezza (33,3% / 33,3% / 33,3%) su tutte le dimensioni dello schermo:
s4
s4
s4
Esempio
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div> Prova tu stesso " Tre colonne disuguali
Tre colonne vari larghezza (25% / 50% / 25%) su tablet, computer portatili e desktop. Sui telefoni cellulari, le colonne saranno impilare automaticamente (100 width%):
m3
m6
m3
Esempio
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div> Prova tu stesso " Nota: Questo esempio è lo stesso che utilizza w3 quarto (m3), w3-metà (M6), w3-quarto (m3), che si è appreso nel W3.CSS Responsive capitolo.
sei colonne
Sei colonne della stessa larghezza (16% ciascuno) su tablet, computer portatili e desktop. Sui telefoni cellulari, le colonne saranno impilare automaticamente (100 width%):
m2
m2
m2
m2
m2
m2
Esempio
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div> Prova tu stesso " Mixed: mobile e laptop
È possibile combinare le classi per creare un layout dinamico e flessibile. Questo esempio produrrà un layout a due colonne con una spaccatura 83.34% / 16,66% (L8, L4) su schermi di grandi dimensioni e di un 50% / 50% (S6, S6) per parti separate su schermi di piccole dimensioni:
L8 s6
l4 s6
Esempio
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Prova tu stesso " Mixed: mobili, tablet e laptop
Questo esempio produrrà un layout a tre colonne con un / 58.34% / 16,66% (L3, L7, L2) scissione del 25% su schermi di grandi dimensioni, il 50% / 25% / 25% (M6, m3, m3) per parti separate su schermi di medie e un 33,3% / 33,3% / 33,3% (s4, s4, S4) per parti separate su schermi di piccole dimensioni:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Esempio
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Prova tu stesso " Differenza tra w3-fila e w3-row-padding
La classe w3-riga definisce un contenitore imbottito meno, mentre la classe w3-fila-padding aggiunge un'imbottitura 8px sinistra ea destra per ogni colonna:
w3-fila:
w3-row-padding:
Esempio
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> Prova tu stesso " utilizzando Percentuale
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Esempio
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div> Prova tu stesso " Utilizzando w3-riposo
150px
riposo
75px
riposo
100px
100px
riposo
trimestre
80px
riposo
trimestre
trimestre
trimestre
35%
riposo
Esempio di utilizzo di riposo
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Prova tu stesso "