Grade Responsive
W3.CSS suporta uma grelha de fluido 12 responsivo coluna.
Redimensionar a página para ver o efeito!
Esta parte vai ocupar 12 colunas em uma tela pequena, 4 em uma tela de médio e 3 em uma tela grande.
Esta parte vai ocupar 12 colunas em uma tela pequena, 8 em uma tela de médio e 9 em uma tela grande.
Exemplo
<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> Tente você mesmo " linhas Responsive
sistema de rede de W3.CSS é sensível, e as colunas serão re-organizar automaticamente, dependendo do tamanho da tela: Em uma tela grande que pode ficar melhor com o conteúdo organizado em três colunas, mas em uma tela pequena que seria melhor se o conteúdo itens foram empilhados em cima uns dos outros.
Colunas devem residir dentro de uma linha a ser totalmente sensível.
| Classe | Descrição |
|---|---|
| w3-row | Define um recipiente padding-menos para colunas responsivos. |
| w3-row-estofamento | Define um contêiner acolchoado para colunas responsivos. |
| w3-col | Define uma coluna com subclasses |
w3-col tem as seguintes classes sub:
Colunas para telas pequenas (telefones inteligentes) típicos:
| Classe | Descrição |
|---|---|
| s1 | Define 1 de 12 colunas (largura: 08,33%) para telas pequenas |
| s2 | Define 2 de 12 colunas (largura: 16,66%) para telas pequenas |
| s3 | Define 3 de 12 colunas (largura: 25,00%) para telas pequenas |
| s4 | Define 4 de 12 colunas (largura: 33,33%) para telas pequenas |
| S5-S11 | |
| s12 | Define 12 de 12 colunas (largura: 100%). Padrão para telas pequenas |
Colunas de telas médias (comprimidos típicos):
| Classe | Descrição |
|---|---|
| m1 | Define 1 de 12 colunas (largura: 08,33%) para telas médias |
| m2 | Define 2 de 12 colunas (largura: 16,66%) para telas médias |
| m3 | Define 3 de 12 colunas (largura: 25,00%) para telas médias |
| m4 | Define 4 de 12 colunas (largura: 33,33%) para telas médias |
| m5-m11 | |
| m12 | Define 12 de 12 colunas (largura: 100%). Padrão para telas médias |
Colunas para telas grandes (laptops típicos):
| Classe | Descrição |
|---|---|
| L1 | Define 1 de 12 colunas (largura: 08,33%) para as grandes telas |
| l2 | Define 2 de 12 colunas (largura: 16,66%) para as grandes telas |
| l3 | Define 3 de 12 colunas (largura: 25,00%) para as grandes telas |
| l4 | Define 4 de 12 colunas (largura: 33,33%) para as grandes telas |
| l5-l11 | |
| l12 | Define 12 de 12 colunas (largura: 100%). Padrão para telas grandes) |
As classes acima podem ser combinadas para criar esquemas mais dinâmicos e flexíveis.
Cada classe é dimensionado para cima, por isso, se você deseja definir a mesma largura para telas pequenas, médias e grandes, você só precisa especificar a pequena classe. E se você quer a mesma largura em telas médias e grandes, você só precisa especificar a classe média.
No entanto, se você usar somente médio e / ou turmas grandes, a largura será sempre transformar a 100% em telas pequenas.
Nota: O número de colunas deve sempre adicionar-se a 12, para cada linha (6 + 6, 3 + 3 + 6, 9 + 3, etc)!
Duas colunas iguais
Duas colunas de igual largura (50% / 50%) em todos os tamanhos de tela:
S6
S6
Exemplo
<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> Tente você mesmo " Duas colunas desiguais
Duas colunas de larguras desiguais (25% / 75%) em todos os tamanhos de tela:
s3
s9
Exemplo
<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> Tente você mesmo " Três colunas iguais
Três colunas de igual largura (33,3% / 33,3% / 33,3%) em todos os tamanhos de tela:
s4
s4
s4
Exemplo
<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> Tente você mesmo " Três colunas desiguais
Três colunas diferentes de largura (25% / 50% / 25%) de comprimidos, laptops e desktops. Em telefones celulares, as colunas serão empilhados automaticamente (largura de 100%):
m3
m6
m3
Exemplo
<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> Tente você mesmo " Nota: Este exemplo é o mesmo que usar w3 trimestre (m3), w3-metade (M6), w3 trimestre (m3), o que você aprendeu na Responsive W3.CSS capítulo.
seis Colunas
Seis colunas de igual largura (16% cada) de comprimidos, laptops e desktops. Em telefones celulares, as colunas serão empilhados automaticamente (largura de 100%):
m2
m2
m2
m2
m2
m2
Exemplo
<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> Tente você mesmo " Misto: celulares e laptops
Você pode combinar aulas para criar um layout dinâmico e flexível. Este exemplo irá produzir um layout de duas colunas com uma fração de 83,34% / 16,66% (l8, l4) em telas grandes e uma 50% / 50% (S6, S6) dividida em telas pequenas:
l8 S6
l4 S6
Exemplo
<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> Tente você mesmo " Mistos: móveis, tablets e laptops
Este exemplo irá produzir um layout de três colunas com um 58,34% / 16,66% (L3, L7, l2) de divisão 25% / em telas grandes, de 50% / 25% / 25% (m6, m3, m3) dividida em telas de médio e a 33,3% / 33,3% / 33,3% (S4, S4 S4) dividida em telas pequenas:
l3 m6 S4
l7 m3 S4
l2 m3 S4
Exemplo
<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> Tente você mesmo " Diferença entre w3-linha e w3-row-estofamento
A classe w3-linha define um recipiente acolchoado-less, enquanto a classe w3-row-preenchimento adiciona um preenchimento 8px esquerda e direita a cada coluna:
w3-fila:
w3-row-padding:
Exemplo
<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> Tente você mesmo " usando Percent
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Exemplo
<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> Tente você mesmo " Usando w3-rest
150px
descansar
75px
descansar
100px
100px
descansar
trimestre
80px
descansar
trimestre
trimestre
trimestre
35%
descansar
Exemplo usando o resto
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Tente você mesmo "