W3.CSS- waarskuwings


Die w3-paneelklas is die perfekte klas om alle soorte waarskuwings te vertoon:

×

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Waarskuwings word dikwels met 'n sterk kleur vertoon:

×

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Voorbeeld

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 

Wys waarskuwings

×

Waarskuwing!

Geel dui dikwels op 'n waarskuwing wat dalk aandag moet kry.

×

Waarskuwing!

Geel dui dikwels op 'n waarskuwing wat dalk aandag moet kry.

Voorbeeld

<div class="w3-panel w3-yellow">
  <h3>Warning!</h3>
  <p>Yellow often indicates a warning that might need attention.</p>
</div> 

Vertoon suksesse

×

Sukses!

Groen dui dikwels op iets suksesvol of positief.

×

Sukses!

Groen dui dikwels op iets suksesvol of positief.

Voorbeeld

<div class="w3-panel w3-green">
  <h3>Success!</h3>
  <p>Green often indicates something successful or positive.</p>
</div> 

Wys inligting

×

Inligting!

Blou dui dikwels op 'n neutrale insiggewende verandering of aksie.

×

Inligting!

Blou dui dikwels op 'n neutrale insiggewende verandering of aksie.

Voorbeeld

<div class="w3-panel w3-blue">
  <h3>Information!</h3>
  <p>Blue often indicates a neutral informative change or action.</p>
</div> 

Die gebruik van 'n houer

Die w3-houerklas kan ook gebruik word om waarskuwings te vertoon:

Voorbeeld

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 


Waarskuwings in alle kleure

Waarskuwings word dikwels in spesiale kleure vertoon, maar enige kleur kan gebruik word:

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Voorbeeld

<div class="w3-panel w3-blue-grey">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 

Sluitingswaarskuwings

Om die waarskuwingskassie toe te maak, klik op die X in die regter boonste hoek:

×

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Om die X te skep wat die waarskuwing sluit, voeg 'n <span>-element met klas w3-knoppie en 'n onclick - gebeurtenis by:

Voorbeeld

<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">&times;</span>

Wenk: Die HTML × entiteit is die voorkeur-ikoon vir toemaakknoppies (eerder as die letter "X").


Afgeronde waarskuwings

Gebruik die w3-ronde klasse as jy afgeronde hoeke wil hê:

Sukses!

Hier word w3-round gebruik.

Sukses!

Hier word w3-rond-groot gebruik.

Sukses!

Hier word w3-round-xxlarge gebruik.

Voorbeeld

<div class="w3-panel w3-green w3-round">

Waarskuwing as 'n kaart

Gebruik 'n w3-kaart klas as jy wil hê die waarskuwing moet as 'n kaart vertoon word:

Waarskuwing!

Geel dui dikwels op iets wat aandag nodig het.

Voorbeeld

<div class="w3-panel w3-yellow w3-card-4">