BS grid asoslari
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 avtomatik ravishda qayta 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.
Bootstrap grid’ining asosiy tuzilishi
Quyida Bootstrap grid’ining asosiy tuzilishi keltirilgan:
<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>
Avval 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.
Quyida oddiy Bootstrap grid maketlariga oid ba’zi misollarni jamladik.
Uchta teng ustun
Quyidagi misolda planshetlardan boshlab katta kompyuter ekranlarigacha kengayadigan uchta teng kenglikdagi ustunni qanday hosil qilish ko‘rsatilgan. Mobil telefonlarda yoki kengligi 768px dan kichik ekranlarda ustunlar avtomatik ravishda ustma-ust joylashadi:
Misol
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
O‘zingiz sinab ko‘ring »
Ikkita teng bo‘lmagan ustun
Quyidagi misolda planshetlardan boshlab katta kompyuter ekranlarigacha kengayadigan, kengligi turlicha bo‘lgan ikkita ustunni qanday hosil qilish ko‘rsatilgan:
Misol
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
O‘zingiz sinab ko‘ring »
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!