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">×</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">