W3.Layout CSS
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Classi di layout W3.CSS
W3.CSS versione 2.90 / 2.91 ha introdotto le seguenti classi per il layout "simile a una colonna":
| Classe | Descrizione |
|---|---|
| riga di celle w3 | Contenitore per celle (colonne). |
| cella w3 | Cella di layout (colonna). |
| w3-cell-top | Allinea il contenuto nella parte superiore di una cella (colonna). |
| w3-cell-medio | Allinea il contenuto al centro verticale di una cella (colonna). |
| w3-cella-fondo | Allinea il contenuto nella parte inferiore di una cella (colonna). |
| w3-mobile | Aggiunge la reattività mobile first a una cella (colonna). Visualizza gli elementi come elementi di blocco sui dispositivi mobili. |
Le classi di layout sostituiscono le classi di layout obsolete.
I nuovi layout classer sono più versatili e più facili da usare.
Le classi di layout deprecate sono elencate in fondo a questa pagina.
Elementi di blocco HTML
In origine, gli elementi di blocco HTML (come gli elementi <div>) vengono visualizzati come blocchi verticali:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
Celle di layout
La classe w3-cell ridefinisce gli elementi del blocco da visualizzare orizzontalmente (come le celle di una tabella):
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
Contenitore di layout
La riga w3-cell è un contenitore per le celle (colonne).
La larghezza del contenitore w3-cell-row definisce la larghezza totale di tutte le celle contenute.
La larghezza predefinita è 100%:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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 modifichi la larghezza del contenitore delle celle, verrà ridotta la larghezza totale delle celle contenute:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
Le celle di layout si autoregolano
La classe w3-cell ha uno standard di autoregolazione integrato molto carino. Gli elementi affiancati si adatteranno automaticamente alla larghezza necessaria:
Ciao layout W3.CSS.
Ciao layout W3.CSS. Ciao layout W3.CSS.
Esempio
<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>
Le celle del layout si adattano alla stessa altezza
Anche gli elementi w3-cell affiancati si regoleranno automaticamente alla stessa altezza:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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 reattivo
La classe w3-mobile aggiunge la reattività mobile first a qualsiasi elemento HTML.
Usato insieme a w3-cell visualizzerà le colonne di layout verticalmente su schermi piccoli/cellulari e orizzontalmente su schermi medio/grandi.
Su schermi medi e grandi:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Su piccoli schermi:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
Allineamento facile
La classe w3-cell semplifica l'allineamento del testo.
Esistono 3 diverse classi di allineamento:
- w3-cell-top (predefinito)
- w3-cell-medio
- w3-cella-fondo
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
La classe w3-cell-row estende gli elementi per adattarli alla larghezza della pagina:
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Ciao layout W3.CSS.
Esempio
<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>
Classi di layout tabella W3.CSS obsolete
| w3-layout-contenitore | Usa invece w3-cell-row. |
| w3-riga layout | |
| w3-layout-cella | Usa invece w3-cell. |
| w3-layout-top | Usa invece w3-cell-top. |
| w3-layout-medio | Usa invece w3-cell-middle. |
| w3-layout-bottom | Usa invece w3-cell-bottom. |
| w3-layout-col | Usa invece w3-mobile. |
Le classi obsolete verranno rimosse da W3.CSS nella versione 4.0.