Alerty W3.CSS
Klasa w3-panel to idealna klasa do wyświetlania wszystkich typów alertów:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Alerty są często wyświetlane przy użyciu mocnego koloru:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Przykład
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Wyświetl ostrzeżenia
Ostrzeżenie!
Żółty często oznacza ostrzeżenie, które może wymagać uwagi.
Ostrzeżenie!
Żółty często oznacza ostrzeżenie, które może wymagać uwagi.
Przykład
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Wyświetl sukcesy
Powodzenie!
Zielony często oznacza coś udanego lub pozytywnego.
Powodzenie!
Zielony często oznacza coś udanego lub pozytywnego.
Przykład
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Wyświetl informacje
Informacje!
Niebieski często oznacza neutralną zmianę informacyjną lub działanie.
Informacje!
Niebieski często oznacza neutralną zmianę informacyjną lub działanie.
Przykład
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Korzystanie z kontenera
Klasa kontenera w3 może być również używana do wyświetlania alertów:
Przykład
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alerty we wszystkich kolorach
Alerty są często wyświetlane w specjalnych kolorach, ale można użyć dowolnego koloru:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Przykład
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Powiadomienia o zamknięciu
Aby zamknąć okno alertu, kliknij X w prawym górnym rogu:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Aby utworzyć X, który zamyka alert, dodaj element <span> z przyciskiem klasy w3 i zdarzeniem onclick :
Przykład
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Wskazówka: HTML × encja jest preferowaną ikoną przycisków zamykania (zamiast litery „X”).
Zaokrąglone alerty
Użyj klas w3 round , jeśli chcesz zaokrąglić rogi:
Powodzenie!
Tutaj używana jest runda w3.
Powodzenie!
Tutaj używany jest w3-okrągły-duży.
Powodzenie!
Tutaj używany jest w3-okrągły-xxlarge.
Przykład
<div class="w3-panel w3-green w3-round">
Alert jako karta
Użyj klasy w3-card , jeśli chcesz, aby alert był wyświetlany jako karta:
Ostrzeżenie!
Żółty często oznacza coś, co wymaga uwagi.
Przykład
<div class="w3-panel w3-yellow w3-card-4">