BS grid Large

Bootstrap grid misoli: katta qurilmalar

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.

Maslahat: Katta qurilmalar deb ekran kengligi 1200 piksel va undan ortiq bo‘lgan qurilmalarga aytiladi.

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

Endi katta 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. 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%, katta qurilmalarda esa 33%/66% nisbatda bo‘linishga olib keladi:

Faqat Large’dan foydalanish

Quyidagi misolda biz faqat .col-lg-6 klassini (.col-md-* va/yoki .col-sm-* siz) ko‘rsatamiz. Bu katta qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi. Biroq o‘rta VA kichik qurilmalarda ustunlar vertikal ravishda ustma-ust joylashadi (100% kenglik):