classi di utilità
La maggior parte di W3.CSS è costruito intorno a classi di utilità che fornisce imbottitura, i margini, le dimensioni e il posizionamento.
Classi imbottitura
Le classi diampiezza W3-padding- aggiunge padding a qualsiasi elemento HTML:
La classe w3-padding-jumbo aggiunge 32px alto e in basso e 64px a sinistra ea destra.
La classe w3-padding-XXLarge aggiunge 24px alto e in basso e 48px a sinistra ea destra.
La classe w3-padding-xlarge aggiunge 16px alto e in basso e 32px a sinistra ea destra.
La classe w3-padding-large aggiunge 12px alto e in basso e 24px a sinistra ea destra.
La classe w3-padding-medio aggiunge 8px alto e in basso e 16px a sinistra ea destra.
La classe w3-padding-piccolo aggiunge 4px superiore e inferiore e 8px a destra ea sinistra.
La classe w3-padding-tiny aggiunge 2px superiore e inferiore e 4px a destra ea sinistra.
Esempio
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Prova tu stesso " Ilnumero classi zontale w3-padding-aggiungeorizzontale (in alto e in basso) padding a qualsiasi elemento HTML:
La classe w3-padding-Hor-4 aggiunge padding superiore e inferiore 4px.
La classe w3-padding-Hor-8 aggiunge padding superiore e inferiore 8px.
La classe w3-padding-Hor-16 aggiunge 16px padding superiore e inferiore.
La classe w3-padding-Hor-32 aggiunge 32px padding superiore e inferiore.
La classe w3-padding-Hor-64 aggiunge 64px padding superiore e inferiore.
Esempio
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Prova tu stesso " Le classinumero w3-padding-ver- aggiunge padding verticale (destro e sinistro) a qualsiasi elemento HTML:
Il w3-padding-ver-4 di classe aggiunge imbottitura 4px a destra ea sinistra.
Il w3-padding-ver-8 classe aggiunge imbottitura 8px a destra ea sinistra.
Il w3-padding-ver-16 classe aggiunge 16x padding a destra ea sinistra.
Il w3-padding-ver-32 classe aggiunge 32px padding a destra ea sinistra.
La classe w3-padding-Hor-48 aggiunge 64px padding a destra ea sinistra.
Esempio
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Prova tu stesso " Classi margine
Le classiw3 margine aggiungono i margini per un elemento:
La classe w3 margine aggiunge 16px margine a tutte le parti di un elemento.
La classe w3-margin-bottom aggiunge un margine inferiore 16px ad un elemento.
Il w3-margin-left classe aggiunge un 16px margine sinistro di un elemento.
La classe w3-margin-right aggiunge un margine destro 16px a un elemento.
La classe w3-margin-top aggiunge un margine superiore 16 pixel per un elemento.
Esempio
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Prova tu stesso " dimensionamento Classi
La classe di dimensione w3- cambia la font-size di un elemento:
Sto molto piccolo (utilizzando w3-tiny)
Sto piccola (utilizzando w3-piccolo)
Sono di media. Il predefinito.
Sto grande (utilizzando w3-large)
Sono xlarge (utilizzando w3-XLarge)
Esempio
<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> Prova tu stesso " Si può leggere di più su dimensionamento classi nel capitolo Tipografia W3.CSS .
A completare Classi
La classe di dimensione w3-round-aggiunge bordi arrotondati ad un elemento:
Esempio
<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>
Prova tu stesso " La classe Circle
La classe Centro
La classe w3-centro centra un elemento:
Esempio
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Prova tu stesso " Classi galleggiante
La classe w3-sinistra galleggia un elemento a fianco, la classe w3-destra galleggia un elemento verso destra:
Esempio
<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> Prova tu stesso " Mostra / Nascondi Classes
Il w3-nascondino piccolo | media | grande classe nasconde un elemento su specifiche dimensioni dello schermo.
Nota: Ridimensionare la finestra del browser per capire come funziona:
Esempio
<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> Prova tu stesso "