W3.CSS panellar
Panel klassi
w3-panel klassi ajratib ko‘rsatiladigan kontentni chiqarish uchun ishlatiladi.
Panellar xabarlar, eslatmalar, ogohlantirishlar, iqtiboslar va ajralib turishi kerak bo‘lgan boshqa kontent uchun qulay.
London is the capital of England.
Misol
<div class="w3-panel w3-blue">
<p>London is the capital of England.</p>
</div>
O‘zingiz sinab ko‘ring »
Panellar va konteynerlar
w3-container va w3-panel klasslarining ikkalasi ham chap va o‘ng tomondan 16px ichki bo‘shliq (padding) qo‘shadi.
Farqi shundaki, w3-panel qo‘shimcha ravishda yuqori va pastdan 16px tashqi bo‘shliq (margin) ham qo‘shadi.
| Klass | Gorizontal ichki bo‘shliq | Vertikal tashqi bo‘shliq |
|---|---|---|
w3-container |
16px | Yo‘q |
w3-panel |
16px | 16px |
Konteynerlar va panellar orasidagi bo‘shliqni solishtiring:
Bu konteyner.
Bu konteyner.
Bu panel.
Bu panel.
Misol
<div class="w3-container w3-light-grey">
<p>This is a container.</p>
</div>
<div class="w3-panel w3-light-grey">
<p>This is a panel.</p>
</div>
O‘zingiz sinab ko‘ring »
Sahifa tuzilmasini yaratish uchun konteynerdan foydalaning.
Kontent atrofidagi boshqa kontentdan ajralib turishi kerak bo‘lganda paneldan foydalaning.
Xabar panellari
W3.CSS keng tarqalgan xabarlar uchun semantik rang klasslarini o‘z ichiga oladi.
Bu klasslar xabarning ma’nosini muayyan rang orqali ifodalaydi.
| Klass | Qo‘llanilishi |
|---|---|
w3-info |
Ma’lumot |
w3-success |
Muvaffaqiyat |
w3-warning |
Ogohlantirish |
w3-danger |
Xavf yoki xato |
w3-note |
Eslatmalar va muhim ma’lumotlar |
Ma’lumot
Profilingiz yangilandi.
Muvaffaqiyat
O‘zgarishlaringiz saqlandi.
Ogohlantirish
Obunangiz muddati tez orada tugaydi.
Xavf
Nimadir xato ketdi.
Misol
<div class="w3-panel w3-info">
<h3>Information</h3>
<p>Your profile was updated.</p>
</div>
<div class="w3-panel w3-success">
<h3>Success</h3>
<p>Your changes were saved.</p>
</div>
<div class="w3-panel w3-warning">
<h3>Warning</h3>
<p>Your subscription expires soon.</p>
</div>
<div class="w3-panel w3-danger">
<h3>Danger</h3>
<p>Something went wrong.</p>
</div>
O‘zingiz sinab ko‘ring »
Eslatmalar
Eslatmalar va muhim ma’lumotlar uchun w3-note klassidan foydalaning.
Eslatma
W3.CSS panellari istalgan HTML kontentini o‘z ichiga olishi mumkin.
Misol
<div class="w3-panel w3-note">
<p><b>Note:</b> W3.CSS panels can contain any HTML content.</p>
</div>
O‘zingiz sinab ko‘ring »
Rangli panellar
Panellarda istalgan oddiy W3.CSS rang klassidan ham foydalanish mumkin.
Rang xabarning ma’nosini emas, balki dizaynning bir qismini ifodalaganda oddiy ranglardan foydalaning.
Event
The conference starts at 9:00.
Travel
Your train leaves from platform 4.
Misol
<div class="w3-panel w3-indigo">
<h3>Event</h3>
<p>The conference starts at 9:00.</p>
</div>
<div class="w3-panel w3-teal">
<h3>Travel</h3>
<p>Your train leaves from platform 4.</p>
</div>
O‘zingiz sinab ko‘ring »
Chegarali panellar
Panellarga fon rangi berish shart emas.
Chegaralar kontentni yengilroq vizual effekt bilan ajratib ko‘rsatishi mumkin.
Ko‘k chegarali panel.
Misol
<div class="w3-panel w3-border w3-border-blue">
<p>A panel with a blue border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-green">
<p>A panel with a green left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-red">
<p>A panel with a red left border.</p>
</div>
O‘zingiz sinab ko‘ring »
Iqtiboslar uchun panellar
Panellar iqtiboslarni ko‘rsatish uchun ham qulay.
Misol
<div class="w3-panel w3-light-grey w3-leftbar w3-border-grey">
<p class="w3-xlarge">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
O‘zingiz sinab ko‘ring »
Panelga istalgan narsani joylash mumkin
Panel sarlavhalar, paragraflar, rasmlar, tugmalar, ro‘yxatlar va boshqa HTML elementlarini o‘z ichiga olishi mumkin.
Weekend in Oslo
Explore museums, architecture, food, and the Oslo Fjord.
Misol
<div class="w3-panel w3-card w3-light-grey">
<h2>Weekend in Oslo</h2>
<p>Explore museums, architecture, food, and the Oslo Fjord.</p>
<p><button class="w3-button w3-black">View Guide</button></p>
</div>
O‘zingiz sinab ko‘ring »
Holat panelini yaratish
Semantik ranglar holat haqidagi ma’lumotlar uchun ayniqsa qulay.
Website Online
All systems are working normally.
Misol
<div class="w3-panel w3-success">
<h3>Website Online</h3>
<p>All systems are working normally.</p>
<p><button class="w3-button w3-white">View Status</button></p>
</div>
O‘zingiz sinab ko‘ring »
Semantik ranglar va oddiy ranglar
Rang biror ma’noni bildirganda semantik ranglardan foydalaning.
Rang asosan vizual dizaynning bir qismi bo‘lganda oddiy ranglardan foydalaning.
| Maqsad | Misollar |
|---|---|
| Xabar ma’nosi | w3-info, w3-success, w3-warning, w3-danger, w3-note |
| Vizual dizayn | w3-blue, w3-green, w3-red, w3-indigo, w3-teal |
Panel misollari
w3-panel klassi eslatmalarni ko‘rsatish uchun juda mos keladi.
Eslatmalar ko‘pincha och (pale) rangda ko‘rsatiladi:
Misol
<div class="w3-panel w3-pale-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
w3-panel klassi iqtiboslarni ko‘rsatish uchun juda mos keladi:
Misol
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
O‘zingiz sinab ko‘ring »
w3-panel klassi ogohlantirish xabarlarini ko‘rsatish uchun juda mos keladi:
Misol
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
O‘zingiz sinab ko‘ring »
w3-panel klassi kartochkalarni ko‘rsatish uchun juda mos keladi:
Misol
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
Panellarning burchaklarini yumaloqlash mumkin:
Misol
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
Panelni yashirish (yopish)
Foydalanuvchi panelni yashira olishi uchun yopish tugmasini qo‘shing.
Bu panelni yopish uchun X belgisini bosing.
Misol
<div class="w3-panel w3-danger w3-display-container">
<span class="w3-button w3-large w3-display-topright"
onclick="this.parentElement.style.display='none'">×</span>
<p>Click the X to close this panel.</p>
</div>
O‘zingiz sinab ko‘ring »
Panelni ko‘rsatish
Yashirin panelni ko‘rsatish uchun JavaScript’dan ham foydalanish mumkin.
Misol
<button class="w3-button w3-black"
onclick="document.getElementById('id01').style.display='block'">
Show Panel
</button>
<div id="id01" class="w3-panel w3-success w3-display-container" style="display:none">
<span class="w3-button w3-large w3-display-topright"
onclick="this.parentElement.style.display='none'">×</span>
<p>This panel was hidden.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!