Bootstrap panjara misollari

Bootstrap grid tizimida qurilish bilan tanishish uchun asosiy tarmoq sxemalari.

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 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 3 grid tizimi to'rtta sinfga ega: xs (telefonlar), sm (planshetlar), md (ish stollari) va lg (kattaroq ish stollari). 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 xs va sm uchun bir xil kengliklarni o'rnatishni rejalashtirmoqchi bo'lsangiz, faqat xs ni belgilashingiz kerak.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Aralash: mobil, planshet va ish stoli

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

Ustunni tozalash

Noto'g'ri tarkib bilan noqulay o'rashning oldini olish uchun ma'lum to'xtash nuqtalarida suzuvchilarni tozalang .

.col-xs-6 .col-sm-3 Ko‘rish oynasining
o‘lchamini o‘zgartiring yoki misol uchun uni telefoningizda tekshiring.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Ofset, surish va tortishni tiklash

Muayyan to'xtash nuqtalarida ofsetlarni, surishlarni va tortishlarni qayta o'rnating.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-ofset-2 .col-md-6 .col-md-ofset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-ofset-2 .col-lg-6 .col-lg-ofset-0