W3.CSS 12 ustunli tizim
12 ustunli tizim
W3.CSS veb-sahifani 12 ta ustunga bo‘la oladi.
W3.CSS 12 ustunli tizim klasslari
| Klass | Tavsif |
|---|---|
| w3-row | Moslashuvchan ustunlar uchun konteyner |
| w3-row-padding | Ichki bo‘shliqli moslashuvchan ustunlar uchun konteyner |
| w3-col | Moslashuvchan ustun |
| l1 - l12 | Katta ekranlar uchun moslashuvchan ustun o‘lchamlari |
| m1 - m12 | O‘rta ekranlar uchun moslashuvchan ustun o‘lchamlari |
| s1 - s12 | Kichik ekranlar uchun moslashuvchan ustun o‘lchamlari |
Veb-sahifalarni ko‘plab turli qurilmalarda ko‘rish mumkin: kompyuterlar, planshetlar va telefonlar. Qurilma o‘lchamidan qat’i nazar, veb-sahifangiz chiroyli ko‘rinishi va undan foydalanish qulay bo‘lishi kerak.
W3.CSS kichik, o‘rta va katta ekranlar uchun moslashuvchan maketlar yaratishga mo‘ljallangan klasslarni o‘z ichiga oladi.
Kichik, o‘rta va katta ekranlar
W3.CSS’da moslashuvchan ustun klasslarining uchta guruhi mavjud:
| Klass | Qurilma | Ekran kengligi |
|---|---|---|
s1 - s12 |
Kichik | 601px dan kichik |
m1 - m12 |
O‘rta | 601px dan 992px gacha |
l1 - l12 |
Katta | 993px va undan keng |
Kichik, o‘rta va katta ekranlar uchun ustunlarning turli kombinatsiyalaridan foydalanishingiz mumkin.
w3-col klassi
Ustun klasslari w3-col bilan birga ishlatiladi:
s4
s8
4 ustun
8 ustun
Misol
<div class="w3-row">
<div class="w3-col s4">4 columns</div>
<div class="w3-col s8">8 columns</div>
</div>
O‘zingiz sinab ko‘ring »
Eslatma
w3-col dan keyingi raqamlar (s4 va s8) element 12 ta ustundan nechtasini egallashi kerakligini bildiradi.
Moslashuvchan ustunlar
Bitta elementda kichik, o‘rta va katta ekran klasslarini birlashtirishingiz mumkin.
Misol
<div class="w3-col s12 m6 l4">
Content
</div>
Yuqoridagi misol quyidagini anglatadi:
| Ekran | Klass | Ustunlar | Kenglik |
|---|---|---|---|
| Kichik | s12 |
12 | 100% |
| O‘rta | m6 |
6 | 50% |
| Katta | l4 |
4 | 33.33% |
Moslashuvchan ustunlar ekran o‘lchamiga qarab o‘zgaradigan maketlar yaratishni osonlashtiradi.
Moslashuvchan uch ustunli maket
Quyidagi misol kichik ekranlarda bitta, o‘rta ekranlarda ikkita, katta ekranlarda esa uchta ustun ko‘rsatadi.
London
Capital of England.
Paris
Capital of France.
Tokyo
Capital of Japan.
Misol
<div class="w3-row-padding">
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">London</div>
</div>
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">Paris</div>
</div>
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">Tokyo</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Faqat o‘rta ekran klasslaridan foydalanish
Uchala ekran o‘lchamini ham ko‘rsatishingiz shart emas.
Agar faqat o‘rta ekran klasslaridan foydalansangiz, kichik ekranlarda ustunlar ustma-ust joylashadi, o‘rta va katta ekranlarda esa belgilangan kengligini saqlaydi.
m4
m8
Misol
<div class="w3-row">
<div class="w3-col m4">m4</div>
<div class="w3-col m8">m8</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan grid mobile-first tamoyiliga asoslangan.
Kichik ekran klassi bo‘lmasa, kichik ekranlarda ustunlar to‘liq kenglikni egallaydi.
Qo‘shimcha misollar
Boshqa moslashuvchan W3.CSS maketlari bilan tanishing.
25% / 75% maket
m3
m9
Misol
<div class="w3-row">
<div class="w3-col m3">m3</div>
<div class="w3-col m9">m9</div>
</div>
O‘zingiz sinab ko‘ring »
33% / 67% maket
m4
m8
Misol
<div class="w3-row">
<div class="w3-col m4">m4</div>
<div class="w3-col m8">m8</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan yon panel
Yon panel o‘rta va katta ekranlarda turli kengliklarga ega bo‘lishi mumkin.
Misol
<div class="w3-row">
<aside class="w3-container w3-col m4 l3">
<h3>Sidebar</h3>
</aside>
<main class="w3-container w3-col m8 l9">
<h3>Main content</h3>
</main>
</div>
O‘zingiz sinab ko‘ring »
Eslatma
W3.CSS’ning 12 ustunli maket tizimi birinchi versiyadan beri W3.CSS tarkibida mavjud.
U mavjud veb-saytlar bilan moslikni saqlash uchun qoldirilgan.
Yangi maketlar uchun W3.CSS zamonaviy CSS Flexbox va Grid texnologiyalarini qo‘llab-quvvatlaydi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!