BS5 grid tizimi
Grid tizimi
Bootstrap’ning grid (to‘r) tizimi flexbox asosida qurilgan va sahifa bo‘ylab 12 tagacha ustun joylashtirish imkonini beradi.
Agar barcha 12 ta ustundan alohida-alohida foydalanishni istamasangiz, kengroq ustunlar hosil qilish uchun ustunlarni birlashtirishingiz mumkin:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Grid tizimi moslashuvchan bo‘lib, ustunlar ekran o‘lchamiga qarab avtomatik ravishda qayta joylashadi.
Ustunlar yig‘indisi 12 yoki undan kam bo‘lishiga ishonch hosil qiling (mavjud 12 ta ustunning barchasidan foydalanish shart emas).
Grid klasslari
Bootstrap 5 grid tizimida oltita klass bor:
.col-(juda kichik qurilmalar — ekran kengligi 576px dan kichik).col-sm-(kichik qurilmalar — ekran kengligi 576px ga teng yoki undan katta).col-md-(o‘rta qurilmalar — ekran kengligi 768px ga teng yoki undan katta).col-lg-(katta qurilmalar — ekran kengligi 992px ga teng yoki undan katta).col-xl-(xlarge qurilmalar — ekran kengligi 1200px ga teng yoki undan katta).col-xxl-(xxlarge qurilmalar — ekran kengligi 1400px ga teng yoki undan katta)
Yuqoridagi klasslarni birlashtirib, yanada dinamik va moslashuvchan maketlar (layout) yaratish mumkin.
Maslahat: Har bir klass kattaroq ekranlarga ham tatbiq etiladi, shuning uchun sm va md uchun bir xil kenglik belgilamoqchi bo‘lsangiz, faqat sm ni ko‘rsatishingiz kifoya.
Bootstrap 5 grid’ining asosiy tuzilishi
Quyida Bootstrap 5 grid’ining asosiy tuzilishi keltirilgan:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
O‘zingiz sinab ko‘ring »
Birinchi misol: qator yarating (<div
class="row">). So‘ngra kerakli miqdordagi ustunlarni qo‘shing (tegishli .col-*-* klasslariga ega teglar). Birinchi yulduzcha (*) moslashuvchanlikni bildiradi: sm, md, lg, xl yoki xxl, ikkinchi yulduzcha esa sonni bildiradi — har bir qatorda bu sonlar yig‘indisi 12 ga teng bo‘lishi kerak.
Ikkinchi misol: har bir col ga son qo‘shish o‘rniga, teng kenglikdagi ustunlar hosil qilish uchun maketni Bootstrap’ning o‘ziga topshiring: ikkita "col" elementi = har bir ustunga 50% kenglik, uchta ustun = har biriga 33.33% kenglik. To‘rtta ustun = 25% kenglik va hokazo. Ustunlarni moslashuvchan qilish uchun .col-sm|md|lg|xl|xxl dan ham foydalanishingiz mumkin.
Grid parametrlari
Quyidagi jadvalda Bootstrap 5 grid tizimi turli ekran o‘lchamlarida qanday ishlashi umumlashtirilgan:
| Juda kichik (<576px) | Kichik (>=576px) | O‘rta (>=768px) | Katta (>=992px) | Juda katta (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Klass prefiksi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid xatti-harakati | Har doim gorizontal | Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal | Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal | Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal | Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal | Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal |
| Konteyner kengligi | Yo‘q (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Nima uchun mos | Portret rejimidagi telefonlar | Landshaft rejimidagi telefonlar | Planshetlar | Noutbuklar | Noutbuklar va kompyuterlar | Noutbuklar va kompyuterlar |
| Ustunlar soni | 12 | 12 | 12 | 12 | 12 | 12 |
| Ustunlar oralig‘i (gutter) kengligi | 1.5rem (ustunning har bir tomonida .75rem) | 1.5rem (ustunning har bir tomonida .75rem) | 1.5rem (ustunning har bir tomonida .75rem) | 1.5rem (ustunning har bir tomonida .75rem) | 1.5rem (ustunning har bir tomonida .75rem) | 1.5rem (ustunning har bir tomonida .75rem) |
| Ichma-ich joylashtirish | Ha | Ha | Ha | Ha | Ha | Ha |
| Siljishlar (offset) | Ha | Ha | Ha | Ha | Ha | Ha |
| Ustunlar tartibi | Ha | Ha | Ha | Ha | Ha | Ha |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!