BS5 ustma-ust/gorizontal
Grid misoli: ustma-ustdan gorizontalga
Keling, juda kichik qurilmalarda ustma-ust joylashgan, kattaroq qurilmalarda esa gorizontal holatga o‘tadigan oddiy grid tizimini yaratamiz.
Quyidagi misolda oddiy "ustma-ustdan gorizontalga" (stacked-to-horizontal) o‘tadigan ikki ustunli maket ko‘rsatilgan: u juda kichik ekranlardan tashqari barcha ekranlarda 50%/50% nisbatda bo‘linadi, juda kichik ekranlarda esa ustunlar avtomatik ravishda ustma-ust joylashadi (100%):
Misol: ustma-ustdan gorizontalga
<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 »
Maslahat: .col-sm-* klasslaridagi sonlar div nechta ustunni (12 tadan) egallashi kerakligini bildiradi. Demak, .col-sm-1 1 ta ustunni, .col-sm-4 4 ta ustunni, .col-sm-6 6 ta ustunni egallaydi va hokazo.
Eslatma: Ustunlar yig‘indisi 12 yoki undan kam bo‘lishiga ishonch hosil qiling (mavjud 12 ta ustunning barchasidan foydalanish shart emas):
Maslahat: .container-fluid klassini .container ga o‘zgartirib, istalgan to‘liq kenglikdagi maketni qat’iy kenglikdagi moslashuvchan maketga aylantirishingiz mumkin:
Misol: moslashuvchan konteyner
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<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-size-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col-size klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi. O‘lcham klasslari (sm, md va h.k.) ustunlar qachondan moslashuvchan bo‘lishini belgilaydi:
<!-- 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>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!