W3.CSS- waarschuwingen
De klasse w3-panel is de perfecte klasse om alle soorten waarschuwingen weer te geven:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Waarschuwingen worden vaak weergegeven met een sterke kleur:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Voorbeeld
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Waarschuwingen weergeven
Waarschuwing!
Geel geeft vaak een waarschuwing aan die mogelijk aandacht behoeft.
Waarschuwing!
Geel geeft vaak een waarschuwing aan die mogelijk aandacht behoeft.
Voorbeeld
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Toon succes
Succes!
Groen duidt vaak op iets succesvols of positiefs.
Succes!
Groen duidt vaak op iets succesvols of positiefs.
Voorbeeld
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Informatie weergeven
Informatie!
Blauw duidt vaak op een neutrale informatieve verandering of actie.
Informatie!
Blauw duidt vaak op een neutrale informatieve verandering of actie.
Voorbeeld
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Een container gebruiken
De klasse w3-container kan ook worden gebruikt om waarschuwingen weer te geven:
Voorbeeld
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Waarschuwingen in alle kleuren
Waarschuwingen worden vaak in speciale kleuren weergegeven, maar elke kleur kan worden gebruikt:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Voorbeeld
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Waarschuwingen sluiten
Om het waarschuwingsvenster te sluiten, klikt u op de X in de rechterbovenhoek:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Om de X te maken die de waarschuwing sluit, voegt u een <span> -element toe met klasse w3-knop en een onclick - gebeurtenis:
Voorbeeld
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Tip: De HTML × entiteit is het voorkeurspictogram voor sluitknoppen (in plaats van de letter "X").
Afgeronde waarschuwingen
Gebruik de w3-ronde klassen als je afgeronde hoeken wilt:
Succes!
Hier wordt w3-ronde gebruikt.
Succes!
Hier wordt w3-rond-groot gebruikt.
Succes!
Hier wordt w3-round-xxlarge gebruikt.
Voorbeeld
<div class="w3-panel w3-green w3-round">
Waarschuwen als een kaart
Gebruik een w3-kaartklasse als u wilt dat de waarschuwing als een kaart wordt weergegeven:
Waarschuwing!
Geel geeft vaak iets aan dat aandacht nodig heeft.
Voorbeeld
<div class="w3-panel w3-yellow w3-card-4">