W3.CSS bildirishnomalar
Bildirishnomalar (alerts)
Bildirishnomalar — foydalanuvchini biror muhim narsa haqida xabardor qiladigan xabarlar.
W3.CSS’da bildirishnomalar odatda w3-panel yordamida yaratiladi.
Oddiy bildirishnoma
Bildirishnoma e’tiborni tortish uchun yorqin rangdan foydalanishi mumkin.
Xavf!
Nimadir xato ketdi. Iltimos, qaytadan urinib ko‘ring.
Misol
<div class="w3-panel w3-danger">
<h3>Danger!</h3>
<p>Something went wrong. Please try again.</p>
</div>
O‘zingiz sinab ko‘ring »
Yopiladigan bildirishnomalar
Bildirishnomalar ko‘pincha foydalanuvchi yopa oladigan vaqtinchalik xabarlar bo‘ladi.
w3-display-topright yordamida yopish tugmasini qo‘shing.
Ogohlantirish!
Seansingiz muddati tez orada tugaydi.
Misol
<div class="w3-panel w3-warning w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">×</span>
<h3>Warning!</h3>
<p>Your session will expire soon.</p>
</div>
O‘zingiz sinab ko‘ring »
HTML’ning × belgisi (×) odatda yopish tugmalari uchun ishlatiladi.
Bildirishnoma turlari
W3.CSS 5 bildirishnomalar uchun qulay bo‘lgan semantik rang klasslarini taqdim etadi.
Ma’lumot: Yangi versiya mavjud.
Muvaffaqiyat: O‘zgarishlaringiz saqlandi.
Ogohlantirish: Seansingiz muddati tez orada tugaydi.
Xavf: O‘zgarishlaringizni saqlab bo‘lmadi.
Misol
<div class="w3-panel w3-info">
<p><b>Information:</b> A new version is available.</p>
</div>
<div class="w3-panel w3-success">
<p><b>Success:</b> Your changes have been saved.</p>
</div>
<div class="w3-panel w3-warning">
<p><b>Warning:</b> Your session will expire soon.</p>
</div>
<div class="w3-panel w3-danger">
<p><b>Danger:</b> Your changes could not be saved.</p>
</div>
O‘zingiz sinab ko‘ring »
Faqat rangga tayanmang.
Ma’noni tushuntirish uchun Ma’lumot, Muvaffaqiyat, Ogohlantirish va Xavf kabi so‘zlardan foydalaning.
Belgili bildirishnomalar
HTML belgilari va emojilar bildirishnoma maqsadini tanib olishni osonlashtirishi mumkin.
✓ Muvaffaqiyatli! O‘zgarishlaringiz saqlandi.
📌 Eslatma: Ishingizni saqlashni unutmang.
✖ Xato! O‘zgarishlaringizni saqlab bo‘lmadi.
Misol
<div class="w3-panel w3-success">
<p>✓ <b>Success!</b> Your changes have been saved.</p>
</div>
O‘zingiz sinab ko‘ring »
Amal tugmasi bor bildirishnoma
Bildirishnoma foydalanuvchiga keyin nima qilish kerakligini ham aytishi mumkin.
Yangilanish mavjud
Ilovaning yangi versiyasi mavjud.
Misol
<div class="w3-panel w3-info">
<h3>Update Available</h3>
<p>A new version of the application is available.</p>
<p>
<button class="w3-button w3-white">Update Now</button>
<button class="w3-button">Later</button>
</p>
</div>
O‘zingiz sinab ko‘ring »
Yumaloq bildirishnomalar
Muvaffaqiyatli! O‘zgarishlaringiz saqlandi.
Muvaffaqiyatli! O‘zgarishlaringiz saqlandi.
Muvaffaqiyatli! O‘zgarishlaringiz saqlandi.
Misol
<div class="w3-panel w3-success w3-round">
<p><b>Success!</b> Your changes have been saved.</p>
</div>
O‘zingiz sinab ko‘ring »
Kartochka ko‘rinishidagi bildirishnoma
Ogohlantirish!
Seansingiz muddati tez orada tugaydi.
Misol
<div class="w3-panel w3-warning w3-card">
<h3>Warning!</h3>
<p>Your session will expire soon.</p>
</div>
O‘zingiz sinab ko‘ring »
Boshqa rangdagi bildirishnomalar
Rang xabar ma’nosini emas, balki dizaynning bir qismini ifodalaganda oddiy W3.CSS rang klasslaridan ham foydalanishingiz mumkin.
Maxsus taklif! Juma kunigacha amal qiladi.
Texnik xizmat: Server bugun kechqurun qayta ishga tushiriladi.
Misol
<div class="w3-panel w3-purple">
<p><b>Special Offer!</b> Available until Friday.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!