W3.CSS Vertoon
Die vertoonklasse laat jou toe om HTML-elemente in spesifieke posisies binne ander HTML-elemente te vertoon:
Links bo
Regs bo
Links onder
Onder regs
Links
Reg
Middel
W3.CSS Vertoonklasse
W3.CSS verskaf die volgende vertoonklasse:
| Klas | Definieer |
|---|---|
| w3-skerm-houer | Houer vir w3-vertoon- klasse |
| w3-skerm-bo-aan | Vertoon inhoud in die boonste linkerhoek van die w3-skerm-houer |
| w3-skerm-boregs | Vertoon inhoud in die regter boonste hoek van die w3-skerm-houer |
| w3-vertoon-links onder | Vertoon inhoud in die onderste linkerhoek van die w3-skerm-houer |
| w3-vertoon-regs onder | Vertoon inhoud in die onderste regterhoek van die w3-skerm-houer |
| w3-vertoning-links | Vertoon inhoud aan die linkerkant (links in die middel) van die w3-skerm-houer |
| w3-vertoon-regs | Vertoon inhoud aan die regterkant (middel regs) van die w3-skerm-houer |
| w3-vertoon-middel | Vertoon inhoud in die middel (middel) van die w3-skerm-houer |
| w3-skerm-bo-middel | Vertoon inhoud bo-middel van die w3-skerm-houer |
| w3-vertoon-onder middel | Vertoon inhoud onder in die middel van die w3-skerm-houer |
| w3-vertoon-posisie | Wys inhoud op 'n gespesifiseerde posisie in die w3-skermhouer |
| w3-vertoon-sweef | Wys inhoud terwyl jy in die w3-skermhouer beweeg |
| w3-links | Sweef 'n element na links (dryf: links) |
| w3-regs | Sweef 'n element na regs (dryf: regs) |
| w3-wys | Wys 'n element (vertoon: blok) |
| w3-wegsteek | Versteek 'n element (vertoon: geen) |
| w3-selfoon | Voeg mobiele-eerste reaksie by enige element. Vertoon elemente as blokelemente op mobiele toestelle |
Voorbeelde
Voorbeeld
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
Dieselfde voorbeeld as hierbo met bygevoegde vulling:
Links bo
Regs bo
Links onder
Onder regs
Links
Reg
Middel
Voorbeeld
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Vertoon teks binne 'n prent:
Links bo
Regs bo
Links onder
Onder regs
Top Middel
Links
Reg
Middel
Onderste middel
Voorbeeld
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Vertoon Hover
Die w3-vertoon-sweef- klas vertoon inhoud terwyl jy beweeg binne 'n w3-skerm-houer (gaan van versteek na gewys).
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Beweeg oor hierdie boks!
Top Mid
Bottom Mid
Voorbeeld
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Mouse over this box!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
Die w3-vertoon-sweef- klasse kan gekombineer word met effek- en animasieklasse om koel hover-effekte te skep:
Khaki pants, $19.99
Voorbeeld
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button
w3-black">John Doe</button>
</div>
</div>
Jy sal later in hierdie tutoriaal meer oor animasies en effekte leer.
Displaying A Flag
With a little bit of imagination, the w3-display-classes can be used to create a flag:
Example
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
w3-left
w3-right
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left
w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).
Hide and Show
Force an element to be shown or hidden with the w3-show or w3-hide class.
Example
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
These classes are often used to toggle between hiding and showing elements:
Example
Hello!
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<button class="w3-button w3-mobile">Link</button>