Upozornění W3.CSS
Třída w3-panel je perfektní třída pro zobrazení všech typů výstrah:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Upozornění se často zobrazují pomocí výrazných barev:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Příklad
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Zobrazit varování
Varování!
Žlutá často označuje varování, které může vyžadovat pozornost.
Varování!
Žlutá často označuje varování, které může vyžadovat pozornost.
Příklad
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Úspěchy zobrazení
Úspěch!
Zelená často označuje něco úspěšného nebo pozitivního.
Úspěch!
Zelená často označuje něco úspěšného nebo pozitivního.
Příklad
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Zobrazení informací
Informace!
Modrá často označuje neutrální informativní změnu nebo akci.
Informace!
Modrá často označuje neutrální informativní změnu nebo akci.
Příklad
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Použití kontejneru
Třídu w3-container lze také použít k zobrazení výstrah:
Příklad
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Upozornění ve všech barvách
Upozornění se často zobrazují ve speciálních barvách, ale lze použít jakoukoli barvu:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Příklad
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Ukončení upozornění
Chcete-li zavřít okno upozornění, klikněte na X v pravém horním rohu:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Chcete-li vytvořit X, které zavře výstrahu, přidejte prvek <span> s třídou w3-button a událostí onclick :
Příklad
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Tip: HTML × entita je preferovaná ikona pro tlačítka zavřít (spíše než písmeno "X").
Zaoblená upozornění
Pokud chcete zaoblené rohy, použijte třídy w3-round :
Úspěch!
Zde se používá w3-round.
Úspěch!
Zde se používá w3-round-large.
Úspěch!
Zde se používá w3-round-xxlarge.
Příklad
<div class="w3-panel w3-green w3-round">
Upozornění jako karta
Pokud chcete, aby se upozornění zobrazilo jako karta, použijte třídu w3- card:
Varování!
Žlutá často označuje něco, co vyžaduje pozornost.
Příklad
<div class="w3-panel w3-yellow w3-card-4">