BS5 grid Small
Kichik (Small) grid misoli
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| Klass prefiksi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Ekran kengligi | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Faraz qilaylik, bizda ikki ustunli oddiy maket bor. Biz ustunlar kichik qurilmalarda 25%/75% nisbatda bo‘linishini xohlaymiz.
Kichik qurilmalar deb ekran kengligi 576 pikseldan 767 pikselgacha bo‘lgan qurilmalarga aytiladi.
Kichik qurilmalar uchun .col-sm-* klasslaridan foydalanamiz.
Ikkala ustunimizga quyidagi klasslarni qo‘shamiz:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Quyidagi misol kichik (shuningdek, medium, large, xlarge va xxlarge) qurilmalarda 25%/75% nisbatda bo‘linishga olib keladi. Juda kichik qurilmalarda esa ustunlar avtomatik ravishda ustma-ust joylashadi (100%):
Misol
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »Eslatma: Ustunlar yig‘indisi 12 yoki undan kam bo‘lishiga ishonch hosil qiling (mavjud 12 ta ustunning barchasidan foydalanish shart emas):
33.3%/66.6% nisbatda bo‘lish uchun .col-sm-4 va .col-sm-8 dan (50%/50% nisbat uchun esa .col-sm-6 va .col-sm-6 dan) foydalanasiz:
Misol
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »Avtomatik maketli ustunlar (auto layout)
Bootstrap 5’da barcha qurilmalar uchun teng kenglikdagi ustunlar yaratishning oson usuli bor: .col-sm-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col-sm klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi.
Agar ekran o‘lchami 576px dan kichik bo‘lsa, ustunlar gorizontal qatorlar bo‘lib ustma-ust joylashadi:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
Keyingi bobda o‘rta qurilmalar uchun boshqacha bo‘linish nisbatini qanday qo‘shish ko‘rsatiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!