BS4 grid Medium

O‘rta (Medium) grid misoli

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

Ammo o‘rta qurilmalarda dizayn 50%/50% nisbatda yaxshiroq ko‘rinishi mumkin.

O‘rta qurilmalar uchun .col-md-* 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".

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

Faqat Medium’dan foydalanish

Quyidagi misolda biz faqat .col-md-6 klassini (.col-sm-* siz) ko‘rsatamiz. Bu medium, large va extra large qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi, chunki klass kattaroq ekranlarga ham tatbiq etiladi. Biroq small va extra small qurilmalarda ustunlar vertikal ravishda ustma-ust joylashadi (100% kenglik):

Avtomatik maketli ustunlar (auto layout)

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

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

Keyingi bobda katta qurilmalar uchun boshqacha bo‘linish nisbatini qanday qo‘shish ko‘rsatiladi.