BS5 grid XLarge

Juda katta (Extra Large) grid misoli

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

Ammo xlarge qurilmalarda dizayn 20%/80% nisbatda yaxshiroq ko‘rinishi mumkin.

Xlarge qurilmalar uchun .col-xl-* klasslaridan foydalanamiz:

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

Faqat XLarge’dan foydalanish

Quyidagi misolda biz faqat .col-xl-6 klassini (.col-lg-*, .col-md-* va/yoki .col-sm-* siz) ko‘rsatamiz. Bu xlarge va xxlarge qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi. Biroq large, 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-xl-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col-xl klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi.

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