Peringatan W3.CSS
Kelas panel w3 adalah kelas yang sempurna untuk menampilkan semua jenis peringatan:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Peringatan sering ditampilkan menggunakan warna yang kuat:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Contoh
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Tampilkan Peringatan
Peringatan!
Kuning sering menunjukkan peringatan yang mungkin perlu diperhatikan.
Peringatan!
Kuning sering menunjukkan peringatan yang mungkin perlu diperhatikan.
Contoh
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Tampilkan Keberhasilan
Kesuksesan!
Hijau sering menunjukkan sesuatu yang sukses atau positif.
Kesuksesan!
Hijau sering menunjukkan sesuatu yang sukses atau positif.
Contoh
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Tampilkan Informasi
Informasi!
Biru sering menunjukkan perubahan atau tindakan informatif yang netral.
Informasi!
Biru sering menunjukkan perubahan atau tindakan informatif yang netral.
Contoh
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Menggunakan Wadah
Kelas w3-container juga dapat digunakan untuk menampilkan peringatan:
Contoh
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Peringatan dalam Semua Warna
Peringatan sering ditampilkan dalam warna khusus, tetapi warna apa pun dapat digunakan:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Contoh
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Peringatan Penutupan
Untuk menutup kotak peringatan, klik X di sudut kanan atas:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Untuk membuat X yang menutup peringatan, tambahkan elemen <span> dengan tombol kelas w3 dan acara onclick :
Contoh
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Tip: HTML × entitas adalah ikon pilihan untuk tombol tutup (bukan huruf "X").
Peringatan Bulat
Gunakan kelas w3-round jika Anda ingin sudut membulat:
Kesuksesan!
Di sini w3-round digunakan.
Kesuksesan!
Di sini digunakan w3-round-large.
Kesuksesan!
Di sini w3-round-xxlarge digunakan.
Contoh
<div class="w3-panel w3-green w3-round">
Waspada sebagai Kartu
Gunakan kelas kartu w3 jika Anda ingin peringatan ditampilkan sebagai kartu:
Peringatan!
Kuning sering menunjukkan sesuatu yang perlu diperhatikan.
Contoh
<div class="w3-panel w3-yellow w3-card-4">