BS grid Medium

Bootstrap grid misoli: o‘rta qurilmalar

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.

Maslahat: O‘rta qurilmalar deb ekran kengligi 992 pikseldan 1199 pikselgacha bo‘lgan qurilmalarga aytiladi.

O‘rta qurilmalar uchun .col-md-* klasslaridan foydalanamiz.

Endi o‘rta qurilmalar uchun ustun kengliklarini qo‘shamiz:

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, katta) 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 o‘rta va katta qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi, chunki klass kattaroq ekranlarga ham tatbiq etiladi. Biroq kichik qurilmalarda ustunlar vertikal ravishda ustma-ust joylashadi (100% kenglik):

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