BS5 grid XSmall
Juda kichik (XSmall) 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 BARCHA qurilmalarda 25%/75% nisbatda bo‘linishini xohlaymiz.
Ikkala ustunimizga quyidagi klasslarni qo‘shamiz:
<div class="col-3">....</div>
<div class="col-9">....</div>
Quyidagi misol barcha qurilmalarda (extra small, small, medium, large, xlarge va xxlarge) 25%/75% nisbatda bo‘linishga olib keladi.
Misol
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-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-4 va .col-8 dan (50%/50% nisbat uchun esa .col-6 va .col-6 dan) foydalanasiz:
Misol
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-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-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
Keyingi bobda kichik qurilmalar uchun boshqacha bo‘linish nisbatini qanday qo‘shish ko‘rsatiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!