BS5 grid asoslari

Bootstrap 5 grid tizimi

Bootstrap’ning grid (to‘r) tizimi flexbox asosida qurilgan va sahifa bo‘ylab 12 tagacha ustun joylashtirish imkonini beradi.

Agar barcha 12 ta ustundan alohida-alohida foydalanishni istamasangiz, kengroq ustunlar hosil qilish uchun ustunlarni birlashtirishingiz mumkin:

Grid tizimi moslashuvchan bo‘lib, ustunlar ekran o‘lchamiga qarab avtomatik ravishda qayta joylashadi.

Ustunlar yig‘indisi 12 yoki undan kam bo‘lishiga ishonch hosil qiling (mavjud 12 ta ustunning barchasidan foydalanish shart emas).

Grid klasslari

Bootstrap 5 grid tizimida oltita klass bor:

• .col- (juda kichik qurilmalar — ekran kengligi 576px dan kichik)
• .col-sm- (kichik qurilmalar — ekran kengligi 576px ga teng yoki undan katta)
• .col-md- (o‘rta qurilmalar — ekran kengligi 768px ga teng yoki undan katta)
• .col-lg- (katta qurilmalar — ekran kengligi 992px ga teng yoki undan katta)
• .col-xl- (xlarge qurilmalar — ekran kengligi 1200px ga teng yoki undan katta)
• .col-xxl- (xxlarge qurilmalar — ekran kengligi 1400px ga teng yoki undan katta)

Yuqoridagi klasslarni birlashtirib, yanada dinamik va moslashuvchan maketlar (layout) yaratish mumkin.

Maslahat: Har bir klass kattaroq ekranlarga ham tatbiq etiladi, shuning uchun sm va md uchun bir xil kenglik belgilamoqchi bo‘lsangiz, faqat sm ni ko‘rsatishingiz kifoya.

Bootstrap 5 grid’ining asosiy tuzilishi

Quyida Bootstrap 5 grid’ining asosiy tuzilishi keltirilgan:

Birinchi misol: qator yarating (<div class="row">). So‘ngra kerakli miqdordagi ustunlarni qo‘shing (tegishli .col-*-* klasslariga ega teglar). Birinchi yulduzcha (*) moslashuvchanlikni bildiradi: sm, md, lg, xl yoki xxl, ikkinchi yulduzcha esa sonni bildiradi — har bir qatorda bu sonlar yig‘indisi 12 ga teng bo‘lishi kerak.

Ikkinchi misol: har bir col ga son qo‘shish o‘rniga, teng kenglikdagi ustunlar hosil qilish uchun maketni Bootstrap’ning o‘ziga topshiring: ikkita "col" elementi = har bir ustunga 50% kenglik, uchta ustun = har biriga 33.33% kenglik. To‘rtta ustun = 25% kenglik va hokazo. Ustunlarni moslashuvchan qilish uchun .col-sm|md|lg|xl|xxl dan ham foydalanishingiz mumkin.

Quyida oddiy Bootstrap 5 grid maketlariga oid ba’zi misollarni jamladik.

Uchta teng ustun

Quyidagi misolda barcha qurilmalar va ekran kengliklarida uchta teng kenglikdagi ustunni qanday yaratish ko‘rsatilgan:

Moslashuvchan ustunlar

Quyidagi misolda planshetlardan boshlab juda katta kompyuter ekranlarigacha kengayadigan to‘rtta teng kenglikdagi ustunni qanday yaratish ko‘rsatilgan. Mobil telefonlarda yoki kengligi 576px dan kichik ekranlarda ustunlar avtomatik ravishda bir-birining ustiga taxlanadi:

Ikkita teng bo‘lmagan moslashuvchan ustun

Quyidagi misolda planshetlardan boshlab juda katta kompyuter ekranlarigacha kengayadigan, kengligi turlicha bo‘lgan ikkita ustunni qanday hosil qilish ko‘rsatilgan: