BS4 grid misollari
Quyida Bootstrap 4 grid maketlariga oid ba’zi misollarni jamladik.
Uchta teng ustun
Belgilangan miqdordagi elementlarda .col klassidan foydalaning — Bootstrap nechta element borligini aniqlaydi (va teng kenglikdagi ustunlar yaratadi). Quyidagi misolda uchta col elementidan foydalanamiz, ularning har biri 33.33% kenglikka ega bo‘ladi.
Misol
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
O‘zingiz sinab ko‘ring »Sonlar yordamida uchta teng ustun
Ustun kengligini boshqarish uchun sonlardan ham foydalanishingiz mumkin. Faqat ustunlar yig‘indisi 12 yoki undan kam bo‘lishiga ishonch hosil qiling (mavjud 12 ta ustunning barchasidan foydalanish shart emas):
Misol
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
O‘zingiz sinab ko‘ring »Uchta teng bo‘lmagan ustun
Teng bo‘lmagan ustunlar yaratish uchun sonlardan foydalanishingiz kerak. Quyidagi misol 25%/50%/25% nisbatda bo‘linishni hosil qiladi:
Misol
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
O‘zingiz sinab ko‘ring »Bitta ustun kengligini belgilash
Biroq faqat bitta ustunning kengligini belgilash kifoya — qo‘shni ustunlar uning atrofida avtomatik ravishda o‘lchamini moslaydi. Quyidagi misol 25%/50%/25% nisbatda bo‘linishni hosil qiladi:
Misol
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
O‘zingiz sinab ko‘ring »Ko‘proq teng ustunlar
Misol
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<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>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
O‘zingiz sinab ko‘ring »Row cols (qatordagi ustunlar soni)
Shuningdek, .row-cols-* klasslari yordamida (ustunlar soni qancha bo‘lishidan qat’i nazar) nechta ustun yonma-yon ko‘rinishini boshqarishingiz mumkin:
Misol
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<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>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
O‘zingiz sinab ko‘ring »Ko‘proq teng bo‘lmagan ustunlar
Misol
<!-- Two Unequal Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
O‘zingiz sinab ko‘ring »Teng balandlik
Agar ustunlardan biri boshqasidan balandroq bo‘lsa (matn yoki CSS height sababli), qolganlari ham unga moslashadi:
Misol
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
O‘zingiz sinab ko‘ring »
Ichma-ich joylashgan ustunlar
Quyidagi misolda ustunlardan birining ichida yana ikkita ustun bo‘lgan ikki ustunli maketni qanday yaratish ko‘rsatilgan:
Misol
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan klasslar
Bootstrap 4 grid tizimida beshta klass bor:
.col-(juda kichik qurilmalar — ekran kengligi 576px dan kichik).col-sm-(kichik qurilmalar — ekran kengligi 576px ga teng yoki undan katta).col-md-(o‘rta qurilmalar — ekran kengligi 768px ga teng yoki undan katta).col-lg-(katta qurilmalar — ekran kengligi 992px ga teng yoki undan katta).col-xl-(xlarge qurilmalar — ekran kengligi 1200px ga teng yoki undan katta)
Yuqoridagi klasslarni birlashtirib, yanada dinamik va moslashuvchan maketlar (layout) yaratish mumkin.
Maslahat: Har bir klass kattaroq ekranlarga ham tatbiq etiladi, shuning uchun sm va md uchun bir xil kenglik belgilamoqchi bo‘lsangiz, faqat sm ni ko‘rsatishingiz kifoya.
Ustma-ustdan gorizontalga
Quyidagi misolda juda kichik qurilmalarda ustma-ust joylashib, kattaroq qurilmalarda (sm, md, lg va xl) gorizontal holatga o‘tadigan ustunli maketni qanday yaratish ko‘rsatilgan:
Misol
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
O‘zingiz sinab ko‘ring »
Aralashtirib moslash (mix and match)
Misol
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
O‘zingiz sinab ko‘ring »
Ustunlar orasidagi bo‘shliqsiz (no gutters)
Ustunlar orasidagi bo‘shliqlarni (gutter — qo‘shimcha oraliq) olib tashlash uchun .row konteyneriga .no-gutters klassini qo‘shing:
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!