W3.CSS- uitleg
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
W3.CSS Uitleg Klasse
W3.CSS weergawe 2.90 / 2.91 het die volgende klasse vir "kolomagtige" uitleg bekendgestel:
| Klas | Beskrywing |
|---|---|
| w3-sel-ry | Houer vir selle (kolomme). |
| w3-sel | Uitlegsel (kolom). |
| w3-sel-top | Belyn inhoud aan die bokant van 'n sel (kolom). |
| w3-sel-middel | Belyn inhoud by die vertikale middel van 'n sel (kolom). |
| w3-sel-onderkant | Belyn inhoud aan die onderkant van 'n sel (kolom). |
| w3-selfoon | Voeg mobiele-eerste-reaksie by 'n sel (kolom). Vertoon elemente as blokelemente op mobiele toestelle. |
Die uitlegklasse vervang verouderde uitlegklasse.
Die nuwe uitlegklasser is meer veelsydig en makliker om te gebruik.
Die verouderde uitlegklasse word onderaan hierdie bladsy gelys.
HTML-blokelemente
Oorspronklik vertoon HTML-blokelemente (soos <div>-elemente) as vertikale blokke:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Uitleg selle
Die w3-selklas herdefinieer blokelemente om horisontaal te vertoon (soos tabelselle):
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Uitleghouer
Die w3-selry is 'n houer vir selle (kolomme).
Die breedte van die w3-sel-ry-houer definieer die totale breedte van al die vervatte selle.
Die verstekwydte is 100%:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
As jy die breedte van die selhouer verander, sal dit die totale breedte van die ingeslote selle verminder:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Uitlegselle is selfaanpasbaar
Die w3-selklas het 'n baie mooi ingeboude selfverstelbare standaard. Side-by-side elemente sal outomaties aanpas by die nodige breedte:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg. Hallo W3.CSS-uitleg.
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>
Uitleg selle pas by gelyke hoogte aan
Sy-aan-sy w3-sel elemente sal ook outomaties self aanpas tot gelyke hoogte:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Responsiewe uitleg
Die w3-mobiele klas voeg mobiele eerste reaksie by enige HTML-element.
As dit saam met w3-cell gebruik word, sal dit die uitlegkolomme vertikaal op klein skerms/selfone en horisontaal op medium/groot skerms vertoon.
Op medium en groot skerms:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Op klein skerms:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Maklike belyning
Die w3-selklas maak dit baie maklik om teks in lyn te bring.
Daar is 3 verskillende belyningsklasse:
- w3-sel-bo (verstek)
- w3-sel-middel
- w3-sel-onderkant
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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>
Die w3-selry- klas strek die elemente uit om by die bladsywydte te pas:
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
Hallo W3.CSS-uitleg.
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-tabeluitlegklasse
| w3-uitleg-houer | Gebruik eerder w3-selry. |
| w3-uitleg-ry | |
| w3-uitleg-sel | Gebruik eerder w3-cell. |
| w3-uitleg-top | Gebruik eerder w3-cell-top. |
| w3-uitleg-middel | Gebruik eerder w3-sel-middel. |
| w3-uitleg-onderkant | Gebruik eerder w3-cell-bottom. |
| w3-uitleg-kol | Gebruik eerder w3-mobile. |
Verouderde klasse sal van W3.CSS in weergawe 4.0 verwyder word.