Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS4 grid tizimi

ULASHISH

Bootstrap 4 grid tizimi

Bootstrap’ning grid tizimi 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:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap’ning grid tizimi moslashuvchan bo‘lib, ustunlar ekran o‘lchamiga qarab qayta joylashadi: katta ekranda kontent uchta ustunga ajratilganda yaxshiroq ko‘rinishi mumkin, kichik ekranda esa kontent elementlari bir-birining ustiga taxlangani ma’qul.

Grid klasslari

Bootstrap 4 grid tizimida beshta 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)

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.

Grid tizimi qoidalari

Bootstrap 4 grid tizimining ba’zi qoidalari:

  • To‘g‘ri tekislanish va ichki chekinish (padding) uchun qatorlar .container (qat’iy kenglikdagi) yoki .container-fluid (to‘liq kenglikdagi) konteyner ichiga joylashtirilishi kerak
  • Ustunlarning gorizontal guruhlarini yaratish uchun qatorlardan foydalaning
  • Kontent ustunlar ichiga joylashtirilishi kerak va qatorlarning bevosita farzand elementlari faqat ustunlar bo‘lishi mumkin
  • Grid maketlarini tez yaratish uchun .row va .col-sm-4 kabi oldindan belgilangan klasslar mavjud
  • Ustunlar ichki chekinish (padding) orqali oraliqlar (gutter — ustunlar kontenti orasidagi bo‘shliqlar) hosil qiladi. Birinchi va oxirgi ustundagi bu ichki chekinish qatorlarda .rows dagi manfiy tashqi chekinish (margin) orqali qoplanadi
  • Grid ustunlari mavjud 12 ta ustundan nechtasini egallashni xohlayotganingizni ko‘rsatish orqali yaratiladi. Masalan, uchta teng ustun uchun uchta .col-sm-4 ishlatiladi
  • Ustunlar kengligi foizda beriladi, shuning uchun ular doimo moslashuvchan (fluid) bo‘ladi va o‘lchami ota elementga nisbatan belgilanadi
  • Bootstrap 3 va Bootstrap 4 o‘rtasidagi eng katta farq shundaki, endi Bootstrap 4 float’lar o‘rniga flexbox’dan foydalanadi. Flexbox’ning katta afzalliklaridan biri shundaki, kengligi belgilanmagan grid ustunlari avtomatik ravishda "teng kenglikdagi ustunlar" (va teng balandlikdagi) sifatida joylashadi. Misol: .col-sm ga ega uchta elementning har biri small breakpoint’dan boshlab avtomatik ravishda 33.33% kenglikka ega bo‘ladi. Maslahat: Agar Flexbox haqida ko‘proq bilmoqchi bo‘lsangiz, CSS Flexbox darsligimizni o‘qishingiz mumkin.

E’tibor bering, Flexbox IE9 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi.

Agar sizga IE8-9 qo‘llab-quvvatlashi kerak bo‘lsa, Bootstrap 3’dan foydalaning. Bu Bootstrap’ning eng barqaror versiyasi bo‘lib, hanuz jamoa tomonidan jiddiy xatolarni tuzatish va hujjatlarni yangilash doirasida qo‘llab-quvvatlanadi. Biroq unga yangi imkoniyatlar qo‘shilmaydi.

Bootstrap 4 grid’ining asosiy tuzilishi

Quyida Bootstrap 4 grid’ining asosiy tuzilishi keltirilgan:

<!-- Control the column width, and how they should appear on different devices --> <div class="row">   <div class="col-*-*"></div>   <div class="col-*-*"></div>   <div class="col-*-*"></div> </div> <!-- Or let Bootstrap automatically handle the layout --> <div class="row">   <div class="col"></div>   <div class="col"></div>   <div class="col"></div>   <div class="col"></div> </div>
O‘zingiz sinab ko‘ring »

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 yoki xl, ikkinchi yulduzcha esa sonni bildiradi — har bir qatorda bu sonlar yig‘indisi har doim 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 dan ham foydalanishingiz mumkin.

Grid parametrlari

Quyidagi jadvalda Bootstrap 4 grid tizimi turli ekran o‘lchamlarida qanday ishlashi umumlashtirilgan:

  Juda kichik (<576px) Kichik (>=576px) O‘rta (>=768px) Katta (>=992px) Juda katta (>=1200px)
Klass prefiksi .col- .col-sm- .col-md- .col-lg- .col-xl-
Grid xatti-harakati Har doim gorizontal Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal Boshida ustma-ust, breakpoint’lardan yuqorida gorizontal
Konteyner kengligi Yo‘q (auto) 540px 720px 960px 1140px
Nima uchun mos Portret rejimidagi telefonlar Landshaft rejimidagi telefonlar Planshetlar Noutbuklar Noutbuklar va kompyuterlar
Ustunlar soni 12 12 12 12 12
Ustunlar oralig‘i (gutter) kengligi 30px (ustunning har bir tomonida 15px) 30px (ustunning har bir tomonida 15px) 30px (ustunning har bir tomonida 15px) 30px (ustunning har bir tomonida 15px) 30px (ustunning har bir tomonida 15px)
Ichma-ich joylashtirish Ha Ha Ha Ha Ha
Siljishlar (offset) Ha Ha Ha Ha Ha
Ustunlar tartibi Ha Ha Ha Ha Ha

Misollar

Keyingi boblarda turli qurilmalar va ekran kengliklari uchun grid tizimlariga misollar ko‘rsatiladi:


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish