Breakpoints va containers sinflar haqida tushuncha

Download 53.96 Kb.

bet	2/2
Sana	21.06.2023
Hajmi	53.96 Kb.
	#1641563

1 2

Juda kichik <576px	Kichik ≥576px	Oʻrtacha ≥768px	Katta ≥992px
Juda katta ≥1200px
Maksimal konteyner kengligi	Yo'q (avtomatik)	540px	720px	960px	1140px
Sinf prefiksi	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# ustun	12
Oluk kengligi	30px (ustunning har bir tomonida 15px)
Yuragi	Ha
Ustunlarni buyurtma qilish	Ha

Ustunlarni avtomatik joylashtirish
kabi aniq raqamlangan sinfsiz ustun o'lchamlarini osonlashtirish uchun to'xtash nuqtasiga xos ustun sinflaridan foydalaning .col-sm-6.
Teng kenglik
Misol uchun, bu erda har bir qurilma va ko'rish oynasi uchun qo'llaniladigan ikkita panjara sxemasi xsmavjud xl. Sizga kerak bo'lgan har bir to'xtash nuqtasi uchun istalgan sonli birliksiz sinflarni qo'shing va har bir ustun bir xil kenglikda bo'ladi.
1 / 2
2 / 2
1/3
2/3
3 / 3
Nusxalash
Copy

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Teng kenglikdagi ko'p qatorli
.w-100Ustunlar yangi qatorga uzilishi kerak bo'lgan joyni kiritish orqali bir nechta satrlarni qamrab oluvchi teng kenglikdagi ustunlar yarating . .w-100Ba'zi sezgir displey yordam dasturlari bilan aralashtirib, tanaffuslarni sezgir qiling .
Safari flexbox xatosi bor edi, bu aniq flex-basisyoki holda ishlashiga to'sqinlik qildi border. Brauzerning eski versiyalari uchun vaqtinchalik echimlar mavjud, ammo sizning maqsadli brauzerlaringiz xato versiyalarga kirmasa, ular kerak bo'lmasligi kerak.
kol
kol
kol
kol
Nusxalash
Copy

col

Bir ustun kengligini o'rnatish
Flexbox panjara ustunlari uchun avtomatik tartib, shuningdek, siz bitta ustunning kengligini o'rnatishingiz va uning atrofida birodar ustunlar avtomatik ravishda o'lchamlarini o'zgartirishingiz mumkinligini anglatadi. Oldindan belgilangan grid sinflari (quyida ko'rsatilganidek), grid miksinlari yoki inline kengliklaridan foydalanishingiz mumkin. E'tibor bering, markaziy ustunning kengligidan qat'i nazar, boshqa ustunlar o'lchamlarini o'zgartiradi.
1/3
2/3 (kengroq)
3 / 3
1/3
2/3 (kengroq)
3 / 3
Nusxalash
Copy

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

O'zgaruvchan kenglik tarkibi
col-{breakpoint}-autoUstunlarni mazmunining tabiiy kengligidan kelib chiqqan holda o'lchash uchun sinflardan foydalaning .
1/3
O'zgaruvchan kenglik tarkibi
3 / 3
1/3
O'zgaruvchan kenglik tarkibi
3 / 3
Nusxalash
Copy

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Javobgar sinflar
Bootstrap tarmog'i murakkab sezgir sxemalarni yaratish uchun oldindan belgilangan besh darajali sinflarni o'z ichiga oladi. Ustunlaringiz oʻlchamini oʻzingizga mos keladigan darajada kichik, kichik, oʻrta, katta yoki juda katta qurilmalarda moslashtiring.
Barcha to'xtash nuqtalari
Qurilmalarning eng kichigidan tortib to eng kattasigacha bir xil bo'lgan tarmoqlar uchun .colva .col-*sinflaridan foydalaning. Sizga alohida o'lchamdagi ustun kerak bo'lganda raqamlangan sinfni belgilang; aks holda, ga yopishib olishingiz mumkin .col.
kol
kol
kol
kol
kol-8
kol-4
Nusxalash
Copy

col

col-8

col-4

Gorizontalga yotqizilgan
Bitta sinflar to'plamidan foydalanib , siz to'plangan holda boshlanadigan va kichik to'xtash nuqtasida ( ) .col-sm-*gorizontal holga keladigan asosiy tarmoq tizimini yaratishingiz mumkin .sm
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Nusxalash
Copy

col-sm-8

col-sm-4

col-sm

Aralashtiring va moslashtiring
Ustunlaringiz shunchaki bir nechta panjara sathlarida to'planishini xohlamaysizmi? Agar kerak bo'lsa, har bir daraja uchun turli sinflar kombinatsiyasidan foydalaning. Bularning barchasi qanday ishlashini yaxshiroq tushunish uchun quyidagi misolga qarang.
.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
Nusxalash
Copy

.col-md-8

.col-6 .col-md-4

.col-6

Oluklar
Oluklar to'xtash nuqtasiga xos bo'lgan to'ldirish va salbiy marja yordam sinflari orqali sezgir tarzda sozlanishi mumkin. Berilgan qatordagi oluklarni o‘zgartirish uchun manfiy chekka yordam dasturini .rowva s ga mos keladigan to‘ldirish yordam dasturini ulang .col. Yana mos keladigan toʻldirish yordam dasturidan foydalanib, kiruvchi toʻlib ketishning oldini olish uchun .containeryoki .container-fluidota-onani ham sozlash kerak boʻlishi mumkin.
lgBu yerda katta ( ) to‘xtash nuqtasi va undan yuqori bo‘lgan Bootstrap panjarasini sozlash misoli keltirilgan. Biz .coltoʻldirishni bilan oshirdik , ota-ona .px-lg-5bilan bunga qarshi chiqdik va keyin oʻramni bilan oʻrnatdik ..mx-lg-n5.row.container.px-lg-5
Maxsus ustun to'ldirish
Maxsus ustun to'ldirish
Nusxalash
Copy

Custom column padding

Qator ustunlari
.row-cols-*Tarkibingiz va tartibingizni eng yaxshi ko'rsatadigan ustunlar sonini tezda sozlash uchun sezgir sinflardan foydalaning. Oddiy .col-*sinflar alohida ustunlar uchun amal qilsa (masalan, .col-md-4), satr ustunlari sinflari .rowyorliq sifatida ota-onaga o'rnatiladi.
Ushbu satr ustunlari sinflaridan asosiy tarmoq sxemalarini tezda yaratish yoki karta tartiblarini boshqarish uchun foydalaning.
Ustun
Ustun
Ustun
Ustun
Nusxalash
Copy

Column

Ustun
Ustun
Ustun
Ustun
Nusxalash
Copy

Column

Ustun
Ustun
Ustun
Ustun
Nusxalash
Copy

Column

Ustun
Ustun
Ustun
Ustun
Nusxalash
Copy

Column

Ustun
Ustun
Ustun
Ustun
Nusxalash
Copy

Column

Siz hamroh bo'lgan Sass aralashmasidan foydalanishingiz mumkin, row-cols():
Nusxalash
Copy
.element {
// Three columns to start
@include row-cols(3);

// Five columns from medium breakpoint up

@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Hizalama
Ustunlarni vertikal va gorizontal tekislash uchun flexbox alignment yordamchi dasturlaridan foydalaning. Internet Explorer 10-11 egiluvchan elementlarning vertikal hizalanishini qo'llab-quvvatlamaydi, agar moslashuvchan konteyner min-heightquyida ko'rsatilganidek bo'lsa. Batafsil ma'lumot uchun Flexbugs #3 ga qarang.

Download 53.96 Kb.

Do'stlaringiz bilan baham:

1 2