Bootstrap panjara misollari

Bootstrap grid tizimida qurilish bilan tanishish uchun asosiy tarmoq sxemalari.

Ushbu misollarda .themed-grid-colsinf mavzuni qo'shish uchun ustunlarga qo'shiladi. Bu sukut bo'yicha Bootstrap-da mavjud bo'lgan sinf emas.

Beshta katakcha

Bootstrap grid tizimida besh daraja mavjud, biz qo'llab-quvvatlaydigan har bir qurilmalar uchun bittadan. Har bir daraja minimal ko'rish maydoni o'lchamidan boshlanadi va agar bekor qilinmasa, avtomatik ravishda kattaroq qurilmalarga qo'llaniladi.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Uchta teng ustunlar

Ish stollaridan boshlab va katta ish stollariga masshtablashadigan uchta teng kenglikdagi ustunlarni oling . Mobil qurilmalarda, planshetlarda va undan pastda ustunlar avtomatik ravishda yig'iladi.

.col-md-4
.col-md-4
.col-md-4

Uchta teng ustunli muqobil

Sinflardan foydalanib, .row-cols-*teng ustunlar bilan osongina panjara yaratishingiz mumkin.

.colning bolasi .row-cols-md-3
.colning bolasi .row-cols-md-3
.colning bolasi .row-cols-md-3

Uchta teng bo'lmagan ustunlar

Ish stollaridan boshlab va har xil kenglikdagi katta ish stollariga o'tkazadigan uchta ustunni oling . Esingizda bo'lsin, panjara ustunlari bitta gorizontal blok uchun o'n ikkitagacha qo'shilishi kerak. Bundan tashqari, ko'rish oynasidan qat'i nazar, ustunlar stacking boshlaydi.

.col-md-3
.col-md-6
.col-md-3

Ikki ustun

Ish stollaridan boshlab va katta ish stollariga o'lchovli ikkita ustunni oling .

.col-md-8
.col-md-4

To'liq kenglik, bitta ustun

To'liq kenglikdagi elementlar uchun panjara sinflari kerak emas.

Ikkita ustunli ikkita ustun

Hujjatlarga ko'ra, joylashtirish oson - mavjud ustunga bir qator ustunlar qo'ying. Bu sizga ikkita ustunni ish stollaridan boshlab va katta ish stollariga masshtab beradi , kattaroq ustun ichida yana ikkita (teng kenglik) bilan.

Mobil qurilma oʻlchamlarida, planshetlar va pastda, bu ustunlar va ularning ichki ustunlari yigʻiladi.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Aralash: mobil va ish stoli

Bootstrap v4 grid tizimi besh darajali sinflarga ega: xs (juda kichik, bu sinf infiksi ishlatilmaydi), sm (kichik), md (o'rta), lg (katta) va xl (juda katta). Ko'proq dinamik va moslashuvchan tartiblarni yaratish uchun ushbu sinflarning deyarli har qanday kombinatsiyasidan foydalanishingiz mumkin.

Sinflarning har bir darajasi kengayadi, ya'ni agar siz md, lg va xl uchun bir xil kengliklarni o'rnatishni rejalashtirmoqchi bo'lsangiz, faqat md ni ko'rsatishingiz kerak.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Aralash: mobil, planshet va ish stoli

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Oluklar

Sinflar bilan .gx-*gorizontal oluklarni sozlash mumkin.

.col.gx-4oluklar bilan
.col.gx-4oluklar bilan
.col.gx-4oluklar bilan
.col.gx-4oluklar bilan
.col.gx-4oluklar bilan
.col.gx-4oluklar bilan

.gy-*Vertikal oluklarni boshqarish uchun sinflardan foydalaning .

.col.gy-4oluklar bilan
.col.gy-4oluklar bilan
.col.gy-4oluklar bilan
.col.gy-4oluklar bilan
.col.gy-4oluklar bilan
.col.gy-4oluklar bilan

Sinflar bilan .g-*har ikki yo'nalishdagi oluklarni sozlash mumkin.

.col.g-3oluklar bilan
.col.g-3oluklar bilan
.col.g-3oluklar bilan
.col.g-3oluklar bilan
.col.g-3oluklar bilan
.col.g-3oluklar bilan

Konteynerlar

Bootstrap v4.4 da qo'shilgan qo'shimcha sinflar ma'lum bir to'xtash nuqtasigacha 100% kenglikdagi konteynerlarga ruxsat beradi. v5 yangi xxlto'xtash nuqtasini qo'shadi.

.idish
.konteyner-sm
.konteyner-md
.konteyner-lg
.container-xl
.container-xxl
.idish-suyuqlik