W3.CSS eslatmalar
Eslatmalar va ma’lumotlar
Eslatmalar alohida e’tiborga loyiq ma’lumotlarni ajratib ko‘rsatish uchun ishlatiladi.
W3.CSS’da eslatmalar odatda w3-panel yordamida yaratiladi.
Oddiy eslatma uslublari
Eslatmalarga oddiy W3.CSS ranglari, chegaralari va round klasslari yordamida uslub berish mumkin.
Eslatma: Davom etishdan oldin ishingizni saqlang.
Unutmang: Sahifangizni turli ekran o‘lchamlarida sinab ko‘ring.
Misol
<div class="w3-panel w3-light-grey w3-border w3-round-large">
<p><b>Note:</b> Save your work before continuing.</p>
</div>
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<p><b>Tip:</b> Use meaningful class names in your HTML.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
<p><b>Remember:</b> Test your page on different screen sizes.</p>
</div>
O‘zingiz sinab ko‘ring »
Foydali maslahat blokini yaratish
Yaxshi eslatma asosiy kontentdan chalg‘itmagan holda ko‘zga tashlanishi kerak.
Misol
<div class="w3-panel w3-pale-green w3-leftbar w3-border-green">
<h3>Tip</h3>
<p>Use max-width:100% to prevent fixed-width content from becoming wider than its parent.</p>
</div>
O‘zingiz sinab ko‘ring »
Ranglardan ehtiyotkorlik bilan foydalaning
Ma’noni yetkazish uchun faqat rangga tayanmang.
Eslatma, Ogohlantirish yoki Xato kabi aniq matnni qo‘shing.
Eslatma klasslari
W3.CSS 5 eslatmalar uchun 5 ta semantik klassni taqdim etadi.
Turli ranglar turli ma’nolarni bildiradi:
| Uslub | Odatiy ma’nosi |
|---|---|
w3-note |
Umumiy eslatma yoki eslatib qo‘yish |
w3-info |
Ma’lumot |
w3-success |
Muvaffaqiyatli natija |
w3-warning |
Ogohlantirish |
w3-danger |
Xavf yoki xato |
w3-note klassi
Eslatma
W3.CSS faqat standart CSS’dan foydalanadi. Hech qanday JavaScript kutubxonasi talab qilinmaydi.
Misol
<div class="w3-panel w3-note">
<h3>Note</h3>
<p>W3.CSS uses standard CSS only. No JavaScript library is required.</p>
</div>
O‘zingiz sinab ko‘ring »
Rang eslatmaning ma’nosini bildirishi kerak bo‘lganda w3-note klassidan foydalaning.
w3-info klassi
Ma’lumot
Profilingiz yangilandi.
Misol
<div class="w3-panel w3-info">
<h3>Information</h3>
<p>Your profile was updated.</p>
</div>
O‘zingiz sinab ko‘ring »
w3-success klassi
Muvaffaqiyat
O‘zgarishlaringiz saqlandi.
Misol
<div class="w3-panel w3-success">
<h3>Success</h3>
<p>Your changes were saved.</p>
</div>
O‘zingiz sinab ko‘ring »
w3-warning klassi
Ogohlantirish
Obunangiz muddati tez orada tugaydi.
Misol
<div class="w3-panel w3-warning">
<h3>Warning</h3>
<p>Your subscription expires soon.</p>
</div>
O‘zingiz sinab ko‘ring »
w3-danger klassi
Xavf
Nimadir xato ketdi.
Misol
<div class="w3-panel w3-danger">
<h3>Danger</h3>
<p>Something went wrong.</p>
</div>
O‘zingiz sinab ko‘ring »
Yumaloq chegarali kulrang
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Misol
<div class="w3-panel w3-border w3-light-grey w3-round-large">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
Yon chiziqli och ko‘k
Misol
<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
Chap chiziqli och qizil
Misol
<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
Chegarali och sariq
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Misol
<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
Pastki chiziqli och yashil
Misol
<div class="w3-panel w3-pale-green w3-bottombar w3-border-green">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
Yuqori va pastki chiziqli sariq
Misol
<div class="w3-panel w3-yellow w3-topbar w3-bottombar w3-border-amber">
<p>This is a note.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!