BS5 grid Large

Katta (Large) grid misoli

Oldingi bobda kichik va o‘rta qurilmalar uchun klasslarga ega grid misolini ko‘rsatdik. Biz ikkita div (ustun) ishlatib, ularni kichik qurilmalarda 25%/75%, o‘rta qurilmalarda esa 50%/50% nisbatda bo‘ldik:

Ammo katta qurilmalarda dizayn 33%/66% nisbatda yaxshiroq ko‘rinishi mumkin.

Katta qurilmalar uchun .col-lg-* klasslaridan foydalanamiz:

Endi Bootstrap shunday "o‘ylaydi": "kichik o‘lchamda nomida -sm- bo‘lgan klasslarga qara va ulardan foydalan. O‘rta o‘lchamda nomida -md- bo‘lgan klasslarga qara va ulardan foydalan. Katta o‘lchamda nomida -lg- so‘zi bo‘lgan klasslarga qara va ulardan foydalan".

Quyidagi misol kichik qurilmalarda 25%/75%, o‘rta qurilmalarda 50%/50%, large, xlarge va xxlarge qurilmalarda esa 33%/66% nisbatda bo‘linishga olib keladi. Juda kichik qurilmalarda ustunlar avtomatik ravishda ustma-ust joylashadi (100%):

Faqat Large’dan foydalanish

Quyidagi misolda biz faqat .col-lg-6 klassini (.col-md-* va/yoki .col-sm-* siz) ko‘rsatamiz. Bu large, xlarge va xxlarge qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi. Biroq medium, small VA extra small qurilmalarda ustunlar vertikal ravishda ustma-ust joylashadi (100% kenglik):

Avtomatik maketli ustunlar (auto layout)

Bootstrap 5’da barcha qurilmalar uchun teng kenglikdagi ustunlar yaratishning oson usuli bor: .col-lg-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col-lg klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi.

Agar ekran o‘lchami 992px dan kichik bo‘lsa, ustunlar gorizontal qatorlar bo‘lib ustma-ust joylashadi: