W3.CSS qatorlar
Oddiy moslashuvchan qatorlar
W3.CSS qatorni yarimlarga, uchdan birlarga va choraklarga bo‘lish uchun oddiy klasslarni taqdim etadi.
Kichik ekranlarda ustunlar avtomatik ravishda ustma-ust joylashadi.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
Qator klasslari
W3.CSS qatori — oddiy maketlar uchun mo‘ljallangan moslashuvchan, mobile-first grid tizimi.
Qator bir yoki bir nechta qator ustunini o‘z ichiga olgan ota elementdan iborat.
Qatorlar moslashuvchan: ustunlar ekran o‘lchamiga qarab avtomatik ravishda qayta joylashadi.
| Klass | Tavsif |
|---|---|
w3-row |
Ustunlarida ichki bo‘shliq bo‘lmagan qator yaratadi |
w3-row-padding |
Ustunlar orasida ichki bo‘shliq bo‘lgan qator yaratadi |
Moslashuvchanlik klasslari
| Klass | Oddiy kenglik | Kichik ekran |
|---|---|---|
w3-half |
Ota elementning 1/2 qismi (50%) | 100% |
w3-third |
Ota elementning 1/3 qismi (33.33%) | 100% |
w3-twothird |
Ota elementning 2/3 qismi (66.66%) | 100% |
w3-quarter |
Ota elementning 1/4 qismi (25%) | 100% |
w3-threequarter |
Ota elementning 3/4 qismi (75%) | 100% |
Mobile-first moslashuvchanlik
601 pikseldan kichik ekranlarda ulushli klasslar to‘liq kenglikka yoyiladi.
Ikkita teng ustun
w3-half klassi qatorni ikkita teng ustunga bo‘ladi.
Bu klassning kengligi ota elementning 1/2 qismiga (50%) teng.
601 pikseldan kichik ekranlarda uning kengligi 100% ga o‘zgaradi.
w3-half
w3-half
Misol
<div class="w3-row">
<div class="w3-half w3-container w3-blue">w3-half</div>
<div class="w3-half w3-container w3-light-blue">w3-half</div>
</div>
O‘zingiz sinab ko‘ring »
Uchta teng ustun
w3-third klassi qatorni uchta teng ustunga bo‘ladi.
w3-third klassining kengligi ota elementning 1/3 qismiga (33.33%) teng.
601 pikseldan kichik ekranlarda uning kengligi 100% ga o‘zgaradi.
w3-third
w3-third
w3-third
Misol
<div class="w3-row">
<div class="w3-third w3-container w3-blue">w3-third</div>
<div class="w3-third w3-container w3-light-blue">w3-third</div>
<div class="w3-third w3-container w3-blue">w3-third</div>
</div>
O‘zingiz sinab ko‘ring »
Uchdan ikki va uchdan bir
Ulushli klasslarni bitta qatorda birlashtirish mumkin.
601 pikseldan kichik ekranlarda ularning barchasi 100% kenglikka o‘zgaradi.
2/3
1/3
Misol
<div class="w3-row">
<div class="w3-twothird w3-container w3-blue">2/3</div>
<div class="w3-third w3-container w3-light-blue">1/3</div>
</div>
O‘zingiz sinab ko‘ring »
To‘rtta teng ustun
w3-quarter klassi qatorni to‘rtta teng ustunga bo‘ladi.
1/4
1/4
1/4
1/4
Misol
<div class="w3-row w3-center">
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
</div>
O‘zingiz sinab ko‘ring »
Chiroyli kombinatsiyalar
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
Ichki bo‘shliqli qatorlar
w3-row-padding klassi ustunlar orasiga bo‘shliq qo‘shadi.
Misol
<div class="w3-row-padding">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_snowtops.jpg"></div>
</div>
O‘zingiz sinab ko‘ring »
Ichki bo‘shliqsiz:
Ustunlar bir-biriga tegib turishini istasangiz, w3-row klassidan foydalaning.
Ustunlar orasida bo‘shliq bo‘lishini istasangiz, w3-row-padding klassidan foydalaning.
Cho‘zilgan ichki bo‘shliqli qatorlar
w3-stretch klassi ichki bo‘shliqli qatorning tashqi chetlaridagi tashqi bo‘shliqlarni (margin) olib tashlaydi.
Misol
<div class="w3-row-padding w3-stretch">
<div class="w3-third">...</div>
<div class="w3-third">...</div>
<div class="w3-third">...</div>
</div>
O‘zingiz sinab ko‘ring »
Ichma-ich qatorlar
Qatorni ustun ichiga joylashtirish mumkin.
1/2
1/2
1/2
1/2
1/2
1/2
Misol
<div class="w3-row">
<div class="w3-half w3-light-grey">
<h3>1/2</h3>
<div class="w3-row">
<div class="w3-half w3-blue">1/2</div>
<div class="w3-half w3-light-blue">1/2</div>
</div>
</div>
<div class="w3-half w3-light-grey">
<h3>1/2</h3>
<div class="w3-row">
<div class="w3-half w3-blue">1/2</div>
<div class="w3-half w3-light-blue">1/2</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Ustun klasslari
| Klass | Kenglik |
|---|---|
w3-col |
Qator ichida ustunni belgilaydi |
w3-rest |
Qolgan kenglikni egallaydi |
w3-col klassi
w3-col klassi yordamida qatorni quyidagilarga bo‘lish mumkin:
- Foizlar
- Piksellar
- Qolgan qism
Foizlardan foydalanish
w3-col klassini CSS kengliklari bilan birga ishlatish mumkin.
20%
60%
20%
Misol
<div class="w3-row">
<div class="w3-col" style="width:20%">20%</div>
<div class="w3-col" style="width:60%">60%</div>
<div class="w3-col" style="width:20%">20%</div>
</div>
O‘zingiz sinab ko‘ring »
20%
60%
20%
45%
55%
15%
35%
30%
20%
Misol
<div class="w3-row">
<div class="w3-col w3-blue" style="width:20%"><p>20%</p></div>
<div class="w3-col w3-light-blue" style="width:60%"><p>60%</p></div>
<div class="w3-col w3-blue" style="width:20%"><p>20%</p></div>
</div>
O‘zingiz sinab ko‘ring »
Foizlar va qolgan qismdan foydalanish
w3-rest klassi boshqa ustunlardan keyin qolgan kenglikni egallaydi.
25%
Qolgan qism
Misol
<div class="w3-row">
<div class="w3-col w3-blue" style="width:25%">25%</div>
<div class="w3-rest w3-light-blue">The Rest</div>
</div>
O‘zingiz sinab ko‘ring »
Piksellar va qolgan qismdan foydalanish
w3-rest klassi boshqa ustunlardan keyin qolgan kenglikni egallaydi.
150px
Qolgan qism
Misol
<div class="w3-row">
<div class="w3-col w3-blue" style="width:150px">150px</div>
<div class="w3-rest w3-light-blue">The Rest</div>
</div>
O‘zingiz sinab ko‘ring »
Flexbox ham flex:1 yordamida shunday maket yarata oladi.
w3-rest klassi
w3-rest — grid ustunidan qolgan joyni egallaydigan kuchli va egiluvchan klass.
150px
rest
75px
rest
100px
100px
rest
quarter
80px
rest
quarter
quarter
quarter
35%
rest
rest ishlatilgan misol
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
O‘zingiz sinab ko‘ring »
class="w3-rest" ishlatilgan element manba kodda har doim oxirgi element bo‘lishi kerak.
Mobile-first yondashuvi
Tarixan veb-dizaynerlar veb-ilovalarni avval kompyuterlar uchun ishlab chiqib, so‘ngra sayt planshet yoki telefonda ham chiroyli ko‘rinishi uchun moslashuvchan veb-dizayn qo‘shishgan.
Endilikda bu tendensiya avval mobil qurilmalar uchun dizayn yaratib, so‘ngra sayt kompyuter va noutbuklarda ham ishlashi uchun moslashuvchan dizayn qo‘shish tomon o‘zgarmoqda.
50/50 — moslashuvchan veb-saytlar dizaynini yaratishning oson usuli. 50/50 dizaynda katta ekranlarda ikkita sahifa, tor ekranlarda esa bitta sahifa ko‘rsatiladi.
My Work
Some of my latest projects.
Just call me awesome.
About Me
Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
Swing By
..for a cup of coffee, or whatever.
Chicago, US
+00 1515151515
test@test.com
Contact
GET IN TOUCH
Qatorlar, Flexbox va Grid
W3.CSS maketlar yaratishning bir necha usulini taqdim etadi.
| Maket | Eng mos holatlar |
|---|---|
| Qatorlar (rows) | Oddiy yarimlar, uchdan birlar va choraklar |
| Flexbox | Elementlarni bir yo‘nalishda joylashtirish va tekislash |
| Grid | Qator va ustunlardan iborat egiluvchan maketlar |
Qatorlar qo‘shimcha CSS yozmasdan oddiy, oldindan belgilangan ulushlar kerak bo‘lganda qulay.
Flexbox va Grid zamonaviy maketlar uchun ko‘proq nazorat imkonini beradi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!