W3.Layout CSS
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Classes de layout W3.CSS
W3.CSS versão 2.90 / 2.91 introduziu as seguintes classes para layout "semelhante a coluna":
| Classe | Descrição |
|---|---|
| w3-cell-row | Recipiente para células (colunas). |
| w3-cell | Célula de layout (coluna). |
| topo de célula w3 | Alinha o conteúdo na parte superior de uma célula (coluna). |
| w3-cell-middle | Alinha o conteúdo no meio vertical de uma célula (coluna). |
| w3-cell-bottom | Alinha o conteúdo na parte inferior de uma célula (coluna). |
| w3-móvel | Adiciona capacidade de resposta móvel a uma célula (coluna). Exibe elementos como elementos de bloco em dispositivos móveis. |
As classes de layout substituem as classes de layout obsoletas.
Os novos classificadores de layout são mais versáteis e fáceis de usar.
As classes de layout obsoletas estão listadas na parte inferior desta página.
Elementos do bloco HTML
Originalmente, os elementos de bloco HTML (como elementos <div>) são exibidos como blocos verticais:
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Células de layout
A classe w3-cell redefine os elementos do bloco para serem exibidos horizontalmente (como células da tabela):
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Contêiner de layout
O w3-cell-row é um recipiente para células (colunas).
A largura do contêiner w3-cell-row define a largura total de todas as células contidas.
A largura padrão é 100%:
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Se você alterar a largura do contêiner da célula, reduzirá a largura total das células contidas:
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
As células de layout são autoajustáveis
A classe w3-cell tem um padrão de auto-ajuste embutido muito bom. Os elementos lado a lado se ajustarão automaticamente à largura necessária:
Olá layout W3.CSS.
Olá layout W3.CSS. Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Células de layout ajustadas para igual altura
Os elementos w3-cell lado a lado também se ajustarão automaticamente para a mesma altura:
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Layout responsivo
A classe w3-mobile adiciona responsividade mobile first a qualquer elemento HTML.
Usado em conjunto com o w3-cell, ele exibirá as colunas de layout verticalmente em telas pequenas/celulares e horizontalmente em telas médias/grandes.
Em telas médias e grandes:
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Em telas pequenas:
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Alinhamento fácil
A classe w3-cell facilita muito o alinhamento de texto.
Existem 3 classes de alinhamento diferentes:
- w3-cell-top (padrão)
- w3-cell-middle
- w3-cell-bottom
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
A classe w3-cell-row estica os elementos para ajustar a largura da página:
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Olá layout W3.CSS.
Exemplo
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Classes de layout de tabela W3.CSS obsoletas
| w3-layout-container | Use w3-cell-row em vez disso. |
| w3-layout-row | |
| w3-layout-cell | Em vez disso, use a célula w3. |
| w3-layout-top | Use w3-cell-top em vez disso. |
| w3-layout-middle | Use w3-cell-middle em vez disso. |
| w3-layout-bottom | Use w3-cell-bottom em vez disso. |
| w3-layout-col | Use w3-mobile em vez disso. |
As classes obsoletas serão removidas do W3.CSS na versão 4.0.