BS grid misollari
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 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 »
Uchta teng bo‘lmagan ustun
Quyidagi misolda planshetlardan boshlab katta kompyuter ekranlarigacha kengayadigan, kengligi turlicha bo‘lgan uchta ustunni qanday hosil qilish ko‘rsatilgan:
Misol
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</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 »
Ustunlar orasidagi bo‘shliqsiz (no gutters)
Qator va uning ustunlaridagi oraliqlarni (gutter) olib tashlash uchun .row-no-gutters klassidan foydalaning:
Misol
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
O‘zingiz sinab ko‘ring »
Ikkita ichki ustunga ega ikki ustun
Quyidagi misolda planshetlardan boshlab katta kompyuter ekranlarigacha kengayadigan ikkita ustunni hosil qilish ko‘rsatilgan, bunda kattaroq ustun ichida yana ikkita (teng kenglikdagi) ustun bor (mobil telefonlarda bu ustunlar va ularning ichki ustunlari ustma-ust joylashadi):
Misol
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
O‘zingiz sinab ko‘ring »
Aralash: mobil va kompyuter
Bootstrap grid tizimida to‘rtta klass bor: xs (telefonlar), sm (planshetlar), md (kompyuterlar) va lg (kattaroq kompyuterlar). Bu klasslarni birlashtirib, yanada dinamik va moslashuvchan maketlar 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.
Misol
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
O‘zingiz sinab ko‘ring »
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.
Aralash: mobil, planshet va kompyuter
Misol
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
O‘zingiz sinab ko‘ring »
Float’larni tozalash (clear)
Notekis kontentda elementlar g‘alati tarzda keyingi qatorga o‘tib ketishining oldini olish uchun muayyan breakpoint’larda float’larni (.clearfix klassi yordamida) tozalang:
Misol
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
O‘zingiz sinab ko‘ring »
Ustunlarni siljitish (offset)
.col-md-offset-* klasslari yordamida ustunlarni o‘ngga suring. Bu klasslar ustunning chap tashqi chekinishini (margin) * ustun miqdoriga oshiradi:
Misol
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
O‘zingiz sinab ko‘ring »
Push va Pull — ustunlar tartibini o‘zgartirish
.col-md-push-* va .col-md-pull-* klasslari yordamida grid ustunlarining tartibini o‘zgartiring:
Misol
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!