W3.CSS- indeling
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
W3.CSS-indelingsklassen
W3.CSS versie 2.90 / 2.91 introduceerde de volgende klassen voor "kolomachtige" lay-out:
| Klas | Beschrijving |
|---|---|
| w3-cel-rij | Houder voor cellen (kolommen). |
| w3-cel | Lay-outcel (kolom). |
| w3-cel-top | Lijnt de inhoud uit boven aan een cel (kolom). |
| w3-cel-midden | Lijnt de inhoud uit op het verticale midden van een cel (kolom). |
| w3-celbodem | Lijnt de inhoud uit onder aan een cel (kolom). |
| w3-mobiel | Voegt mobile-first responsiviteit toe aan een cel (kolom). Geeft elementen weer als blokelementen op mobiele apparaten. |
De opmaakklassen vervangen verouderde opmaakklassen.
De nieuwe layout classer is veelzijdiger en gebruiksvriendelijker.
De verouderde indelingsklassen staan onderaan deze pagina vermeld.
HTML-blokelementen
Oorspronkelijk worden HTML-blokelementen (zoals <div>-elementen) weergegeven als verticale blokken:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Lay-outcellen
De klasse w3-cell herdefinieert blokelementen om horizontaal weer te geven (zoals tabelcellen):
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Lay-outcontainer
De w3-cel-rij is een container voor cellen (kolommen).
De breedte van de w3-cel-rij-container definieert de totale breedte van alle ingesloten cellen.
De standaardbreedte is 100%:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Als u de breedte van de celcontainer wijzigt, wordt de totale breedte van de ingesloten cellen kleiner:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Lay-outcellen zijn zelfinstellend
De w3-cell klasse heeft een zeer mooie ingebouwde zelfinstellende standaard. Side-by-side elementen passen zich automatisch aan de benodigde breedte aan:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling. Hallo W3.CSS-indeling.
Voorbeeld
<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>
Lay-outcellen aanpassen aan gelijke hoogte
Naast elkaar geplaatste w3-celelementen passen zich ook automatisch aan op gelijke hoogte:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Responsieve lay-out
De klasse w3-mobile voegt mobile first responsiviteit toe aan elk HTML-element.
In combinatie met w3-cell worden de lay-outkolommen verticaal weergegeven op kleine schermen/mobiele telefoons en horizontaal op middelgrote/grote schermen.
Op middelgrote en grote schermen:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Op kleine schermen:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Eenvoudige uitlijning
De klasse w3-cell maakt het heel eenvoudig om tekst uit te lijnen.
Er zijn 3 verschillende uitlijningsklassen:
- w3-cel-top (standaard)
- w3-cel-midden
- w3-celbodem
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
De klasse w3-cell-row rekt de elementen uit om in de paginabreedte te passen:
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Hallo W3.CSS-indeling.
Voorbeeld
<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>
Verouderde W3.CSS-tabelindelingsklassen
| w3-layout-container | Gebruik in plaats daarvan w3-celrij. |
| w3-layout-rij | |
| w3-layout-cel | Gebruik in plaats daarvan w3-cell. |
| w3-layout-top | Gebruik in plaats daarvan w3-cell-top. |
| w3-layout-midden | Gebruik in plaats daarvan w3-cell-middle. |
| w3-lay-out-onder | Gebruik in plaats daarvan w3-cell-bottom. |
| w3-layout-col | Gebruik in plaats daarvan w3-mobile. |
Verouderde klassen worden verwijderd uit W3.CSS in versie 4.0.