Classes de utilidade
A maioria dos W3.CSS é construído em torno classes de utilitários proporcionando preenchimento, margens, tamanhos e posicionamento.
Classes de preenchimento
As classesde w3-padding- adiciona o preenchimento a qualquer elemento HTML:
A classe-w3-preenchimento jumbo acrescenta 32px superior e inferior e 64px esquerda e direita.
A classe w3-padding-XXLarge acrescenta 24px superior e inferior e 48px esquerda e direita.
A classe w3-padding-xlarge acrescenta 16px superior e inferior e 32px esquerda e direita.
A classe-w3-preenchimento grande acrescenta 12px superior e inferior e 24px esquerda e direita.
A classe-w3-preenchimento médio acrescenta 8px superior e inferior e 16px esquerda e direita.
A classe-w3-preenchimento pequena acrescenta 4px superior e inferior e 8px esquerda e direita.
A classe-w3-preenchimento minúscula acrescenta 2px superior e inferior e 4px esquerda e direita.
Exemplo
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Tente você mesmo " As classesnúmero hor- w3-padding-adiciona o preenchimento horizontal (superior e inferior) a qualquer elemento HTML:
A classe w3-padding-hor-4 adiciona o preenchimento superior e inferior 4px.
A classe w3-padding-hor-8 adiciona o preenchimento superior e inferior 8px.
A classe w3-padding-hor-16 acrescenta 16px superior e preenchimento de fundo.
A classe w3-padding-hor-32 acrescenta 32px superior e preenchimento de fundo.
A classe w3-padding-hor-64 acrescenta 64px superior e preenchimento de fundo.
Exemplo
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Tente você mesmo " As classesnuméricas-w3-preenchimento ver- adiciona o preenchimento vertical (esquerda e direita) para qualquer elemento HTML:
A-ver w3-padding-4 class acrescenta 4px preenchimento à esquerda e à direita.
O w3-padding-ver-8 classe acrescenta 8px preenchimento à esquerda e à direita.
O w3-padding-ver-16 classe adiciona 16x esquerda e direita estofamento.
O w3-padding-ver-32 classe acrescenta 32px esquerda e direita estofamento.
A classe w3-padding-hor-48 acrescenta 64px esquerda e direita estofamento.
Exemplo
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Tente você mesmo " Classes de margem
As classesw3-margem adicionar margens para um elemento:
A classe w3 margem acrescenta 16px margem para todos os lados de um elemento.
A classe-w3-margem inferior adiciona uma margem inferior 16px a um elemento.
O w3-margem esquerda classe adiciona um 16px margem esquerda de um elemento.
A classe-w3-margem direita adiciona uma margem direita 16px a um elemento.
A classe w3-margin-top adiciona uma margem superior 16px a um elemento.
Exemplo
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Tente você mesmo " dimensionamento Classes
A classe de tamanho w3- muda o tamanho da fonte de um elemento:
Estou pequena (usando w3-tiny)
Estou pequena (usando w3-pequeno)
Eu sou médio. O padrão.
Estou grande (usando w3-large)
Estou xlarge (usando w3-xlarge)
Exemplo
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Tente você mesmo " Você pode ler mais sobre dimensionamento de classes no capítulo Tipografia W3.CSS .
Completando Classes
A classe de tamanho w3-redonda adiciona arredondado bordas para um elemento:
Exemplo
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Tente você mesmo " A classe Circle
A classe Centro
A classe w3-center centra um elemento:
Exemplo
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Tente você mesmo " flutuante Classes
A classe w3-esquerda flutua um elemento para a esquerda, a classe w3 direito flutua um elemento para a direita:
Exemplo
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Tente você mesmo " Show / Hide Classes
A-w3-hide pequena | médio | grande classe esconde um elemento em um tamanho específico de tela.
Nota: redimensionar a janela do navegador para entender como ele funciona:
Exemplo
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Tente você mesmo "