BS grid tizimi
Bootstrap grid tizimi
Bootstrap’ning grid (to‘r) 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 joylashtirilganda yaxshiroq ko‘rinishi mumkin, kichik ekranda esa kontent elementlari bir-birining ustiga joylashgani ma’qulroq bo‘ladi.
Maslahat: Esda tuting, bitta qatordagi grid ustunlari yig‘indisi o‘n ikkiga teng bo‘lishi kerak. Undan ortiq bo‘lsa, viewport o‘lchamidan qat’i nazar ustunlar ustma-ust joylashadi.
Grid klasslari
Bootstrap grid tizimida to‘rtta klass bor:
xs(telefonlar uchun — kengligi 768px dan kichik ekranlar)sm(planshetlar uchun — kengligi 768px yoki undan katta ekranlar)md(kichik noutbuklar uchun — kengligi 992px yoki undan katta ekranlar)lg(noutbuklar va kompyuterlar uchun — kengligi 1200px yoki undan katta ekranlar)
Yuqoridagi klasslarni birlashtirib, yanada dinamik va moslashuvchan maketlar (layout) yaratish mumkin.
Maslahat: Har bir klass kattaroq ekranlarga ham tatbiq etiladi, shuning uchun xs va sm uchun bir xil kenglik belgilamoqchi bo‘lsangiz, faqat xs ni ko‘rsatishingiz kifoya.
Grid tizimi qoidalari
Bootstrap grid tizimining ba’zi qoidalari:
- To‘g‘ri tekislanish va ichki chekinish (padding) uchun qatorlar
.container(qat’iy kenglik) yoki.container-fluid(to‘liq kenglik) ichiga joylashtirilishi kerak - Ustunlarning gorizontal guruhlarini yaratish uchun qatorlardan foydalaning
- Kontent ustunlar ichiga joylashtirilishi kerak va faqat ustunlar qatorlarning bevosita ichki (farzand) elementlari bo‘lishi mumkin
- Grid maketlarini tez yaratish uchun
.rowva.col-sm-4kabi 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
.rowsdagi manfiy tashqi chekinish (negative margin) orqali qatorlarda kompensatsiya qilinadi - Grid ustunlari mavjud 12 ta ustundan nechtasini egallash kerakligini ko‘rsatish orqali yaratiladi. Masalan, uchta teng ustun uchun uchta
.col-sm-4ishlatiladi - Ustunlar kengligi foizlarda beriladi, shuning uchun ular doimo moslashuvchan (fluid) bo‘ladi va o‘lchami ota elementga nisbatan belgilanadi
Bootstrap grid’ining asosiy tuzilishi
Quyida Bootstrap grid’ining asosiy tuzilishi keltirilgan:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Demak, kerakli maketni yaratish uchun konteyner yarating (<div
class="container">). Keyin qator yarating (<div
class="row">). So‘ngra kerakli miqdordagi ustunlarni qo‘shing (tegishli .col-*-* klasslariga ega teglar). E’tibor bering, har bir qatorda .col-*-* dagi sonlar yig‘indisi doimo 12 ga teng bo‘lishi kerak.
Grid parametrlari
Quyidagi jadvalda Bootstrap grid tizimi turli qurilmalarda qanday ishlashi umumlashtirilgan:
| Juda kichik <768px |
Kichik >=768px |
O‘rta >=992px |
Katta >=1200px |
|
|---|---|---|---|---|
| Klass prefiksi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Nima uchun mos | Telefonlar | Planshetlar | Kichik noutbuklar | Noutbuklar va kompyuterlar |
| 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 |
| Konteyner kengligi | Yo‘q (auto) | 750px | 970px | 1170px |
| Ustunlar soni | 12 | 12 | 12 | 12 |
| Ustun kengligi | Avtomatik | ~62px | ~81px | ~97px |
| 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) |
| Ichma-ich joylashtirish | Ha | Ha | Ha | Ha |
| Siljishlar (offset) | Ha | Ha | Ha | Ha |
| Ustunlar tartibi | Ha | Ha | Ha | Ha |
Misollar
Keyingi boblarda turli qurilmalar uchun grid tizimlariga misollar ko‘rsatilgan:
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!