Grid tizimi
O'n ikkita ustunli tizim, beshta standart javob beruvchi sathlar, Sass o'zgaruvchilari va miksinlari va o'nlab oldindan belgilangan sinflar tufayli barcha shakl va o'lchamdagi maketlarni yaratish uchun kuchli mobil birinchi flexbox tarmog'imizdan foydalaning.
Bootstrap grid tizimi tarkibni joylashtirish va tekislash uchun bir qator konteynerlar, qatorlar va ustunlardan foydalanadi. U flexbox bilan qurilgan va to'liq javob beradi. Quyida misol va panjara qanday birlashishini chuqur ko'rib chiqamiz.
Flexbox bilan yangi yoki tanish emasmisiz? Fon, terminologiya, ko'rsatmalar va kod parchalari uchun ushbu CSS Tricks flexbox qo'llanmasini o'qing .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Yuqoridagi misol bizning oldindan belgilangan panjara sinflarimizdan foydalangan holda kichik, o'rta, katta va qo'shimcha katta qurilmalarda uchta teng kenglikdagi ustunlarni yaratadi. Ushbu ustunlar ota-ona bilan sahifaning markazida joylashgan .container
.
Uni qismlarga ajratib, u qanday ishlaydi:
- Konteynerlar saytingiz tarkibini markazlashtirish va gorizontal ravishda joylashtirish uchun vositani taqdim etadi.
.container
Ta'sirchan piksel kengligi yoki barcha ko'rish oynasi va qurilma o'lchamlari.container-fluid
uchun foydalaning .width: 100%
- Qatorlar ustunlar uchun o'ramlardir. Har bir ustunda
padding
ular orasidagi bo'shliqni boshqarish uchun gorizontal (oluk deb ataladi) mavjud. Keyinpadding
salbiy chekkalari bo'lgan qatorlarda bunga qarshi turadi. Shunday qilib, ustunlaringizdagi barcha kontent chap tomonda vizual ravishda tekislanadi. - To'r tartibida kontent ustunlar ichiga joylashtirilishi kerak va faqat ustunlar satrlarning bevosita bolalari bo'lishi mumkin.
- Flexbox tufayli, ko'rsatilmagan panjara ustunlari
width
avtomatik ravishda teng kenglikdagi ustunlar sifatida joylashadi. Masalan, to'rtta.col-sm
irodaning har biri avtomatik ravishda kichik uzilish nuqtasidan 25% va undan yuqori kenglikda bo'ladi. Qo'shimcha misollar uchun avtomatik tartib ustunlari bo'limiga qarang. - Ustun sinflari har bir satr uchun mumkin bo'lgan 12 tadan foydalanmoqchi bo'lgan ustunlar sonini ko'rsatadi. Shunday qilib, agar siz uchta teng kenglikdagi ustunlarni xohlasangiz, dan foydalanishingiz mumkin
.col-4
. - Ustunlar
width
foizlarda o'rnatiladi, shuning uchun ular har doim asosiy elementga nisbatan suyuq va o'lchamli bo'ladi. padding
Ustunlar alohida ustunlar orasidagi oluklarni yaratish uchun gorizontalga ega, biroq sizmargin
satrlardan vapadding
ustunlardan ustunlarni.no-gutters
o'chirishingiz mumkin.row
.- Tarmoqni sezgir qilish uchun har bir javob beruvchi to'xtash nuqtasi uchun bittadan beshta to'xtash nuqtasi mavjud : barcha to'xtash nuqtalari (qo'shimcha kichik), kichik, o'rta, katta va juda katta.
- Toʻr toʻxtash nuqtalari minimal kenglikdagi media soʻrovlariga asoslanadi, yaʼni ular bitta toʻxtash nuqtasiga va undan yuqori boʻlganlarning barchasiga taalluqlidir (masalan,
.col-sm-4
kichik, oʻrta, katta va oʻta katta qurilmalar uchun amal qiladi, lekin birinchixs
toʻxtash nuqtasi emas). - Semantik belgilash uchun oldindan belgilangan grid sinflari (masalan,
.col-4
) yoki Sass miksinlaridan foydalanishingiz mumkin.
Ba'zi HTML elementlarini moslashuvchan konteyner sifatida ishlata olmaslik kabi flexbox atrofidagi cheklovlar va xatolardan xabardor bo'ling .
Bootstrap ko'pgina o'lchamlarni aniqlash uchun em
s yoki s dan foydalansa, s panjara to'xtash nuqtalari va konteyner kengligi uchun ishlatiladi. Buning sababi, ko'rish maydoni kengligi piksellarda va shrift o'lchamiga qarab o'zgarmaydi .rem
px
Bootstrap grid tizimining aspektlari bir nechta qurilmalarda qanday ishlashini qulay jadval bilan ko'ring.
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 |
kabi aniq raqamlangan sinfsiz ustun o'lchamlarini osonlashtirish uchun to'xtash nuqtasiga xos ustun sinflaridan foydalaning .col-sm-6
.
Misol uchun, bu erda har bir qurilma va ko'rish oynasi uchun qo'llaniladigan ikkita panjara sxemasi xs
mavjud 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.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Teng kenglikdagi ustunlar bir nechta satrlarga bo'linishi mumkin, ammo Safari flexbox xatosi bu aniq flex-basis
yoki .siz ishlashiga to'sqinlik qildi border
. Brauzerning eski versiyalari uchun vaqtinchalik echimlar mavjud, ammo agar siz yangilangan bo'lsangiz, ular kerak bo'lmasligi kerak.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
col-{breakpoint}-auto
Ustunlarni mazmunining tabiiy kengligidan kelib chiqqan holda o'lchash uchun sinflardan foydalaning .
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
.w-100
Ustunlarning yangi qatorga uzilishini xohlagan joyni qo'shish orqali bir nechta satrlarni qamrab oluvchi teng kenglikdagi ustunlar yarating . .w-100
Ba'zi sezgir displey yordam dasturlari bilan aralashtirib, tanaffuslarni sezgir qiling .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Bootstrap tarmog'i murakkab javob beruvchi 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.
Qurilmalarning eng kichigidan tortib to eng kattasigacha bir xil bo'lgan tarmoqlar uchun .col
va .col-*
sinflaridan foydalaning. Sizga alohida o'lchamdagi ustun kerak bo'lganda raqamlangan sinfni belgilang; aks holda, ga yopishib olishingiz mumkin .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Bitta sinflar to'plamidan foydalanib , siz gorizontal bo'lishdan oldin kichik to'xtash nuqtasida ( ) .col-sm-*
bilan stacked boshlanadigan asosiy tarmoq tizimini yaratishingiz mumkin .sm
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</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>
Ustunlaringiz shunchaki bir nechta panjara sathlarida to'planishini xohlamaysizmi? Zarur bo'lganda, har bir daraja uchun turli sinflar kombinatsiyasidan foydalaning. Bularning barchasi qanday ishlashini yaxshiroq tushunish uchun quyidagi misolga qarang.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Ustunlarni vertikal va gorizontal tekislash uchun flexbox alignment yordamchi dasturlaridan foydalaning.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Oldindan belgilangan panjara sinflarimizdagi ustunlar orasidagi oluklar yordamida olib tashlash mumkin .no-gutters
. Bu barcha bevosita bolalar ustunlaridan salbiy margin
s .row
va gorizontalni olib tashlaydi .padding
Mana bu uslublarni yaratish uchun manba kodi. E'tibor bering, ustunni bekor qilish faqat birinchi kichik ustunlar uchun mo'ljallangan va atribut selektori orqali mo'ljallangan . Bu aniqroq selektorni yaratsa-da, ustunlarni to'ldirish hali ham oraliq yordam dasturlari bilan yanada moslashtirilishi mumkin .
Chetdan chekkagacha dizayn kerakmi? Ota-onani tashlang .container
yoki .container-fluid
.
Amalda, bu qanday ko'rinadi. Shuni yodda tutingki, siz buni boshqa barcha oldindan belgilangan panjara sinflari (jumladan, ustunlar kengligi, sezgir darajalar, qayta tartiblashlar va boshqalar) bilan ishlatishda davom etishingiz mumkin.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.
9 + 4 = 13 > 12 bo'lganligi sababli, bu 4-ustun kenglikdagi div yangi qatorga bitta qo'shni birlik sifatida o'raladi.
Keyingi ustunlar yangi satr bo'ylab davom etadi.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Flexbox-da ustunlarni yangi qatorga ajratish kichik buzishni talab qiladi: ustunlaringizni yangi qatorga o'rashni width: 100%
xohlagan joyingizga element qo'shing. Odatda bu bir nechta .row
s bilan amalga oshiriladi, lekin har bir amalga oshirish usuli buni hisobga olmaydi.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Bu tanaffusni bizning javob beruvchi displey yordam dasturlarimiz yordamida muayyan to'xtash nuqtalarida ham qo'llashingiz mumkin .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
Kontentingizning vizual tartibini.order-
nazorat qilish uchun sinflardan foydalaning . Ushbu sinflar sezgir, shuning uchun siz to'xtash nuqtasini belgilashingiz mumkin (masalan, ). Barcha beshta grid darajasi bo'ylab qo'llab -quvvatlashni o'z ichiga oladi .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Bundan tashqari , mos ravishda va ( ) ni qo'llash orqali elementni o'zgartiradigan sezgir .order-first
va sinflar mavjud. Bu sinflarni kerak bo'lganda raqamlangan sinflar bilan aralashtirish ham mumkin ..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Siz panjara ustunlarini ikki xil usulda o'zgartirishingiz mumkin: javob .offset-
beruvchi grid sinflarimiz va margin yordamchi dasturlarimiz . To'r sinflari ustunlarga mos keladigan darajada o'lchanadi, chetlari esa ofset kengligi o'zgaruvchan bo'lgan tezkor tartiblar uchun foydaliroqdir.
.offset-md-*
Sinflar yordamida ustunlarni o'ngga o'tkazing. Ushbu sinflar ustunning chap chetini *
ustunlar bo'yicha oshiradi. Masalan, to'rtta ustun ustida .offset-md-4
harakatlanadi ..col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Ta'sir qiluvchi to'xtash nuqtalarida ustunlarni tozalashdan tashqari, ofsetlarni tiklashingiz kerak bo'lishi mumkin. Buni grid misolida amalda ko'ring .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
V4-da flexbox-ga o'tish bilan siz .mr-auto
birodar ustunlarini bir-biridan uzoqlashtirish kabi margin yordamchi dasturlardan foydalanishingiz mumkin.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Kontentingizni standart tarmoqqa joylashtirish uchun mavjud ustunga yangi .row
va ustunlar to‘plamini qo‘shing . Ichki qatorlar 12 tagacha yoki undan kamroq ustunlar to'plamini o'z ichiga olishi kerak (barcha 12 ta mavjud ustundan foydalanish shart emas)..col-sm-*
.col-sm-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Bootstrap-ning Sass manba fayllaridan foydalanganda sizda maxsus, semantik va sezgir sahifa tartiblarini yaratish uchun Sass o'zgaruvchilari va miksinlaridan foydalanish imkoniyati mavjud. Bizning oldindan belgilangan grid sinflarimiz tez javob beruvchi sxemalar uchun foydalanishga tayyor sinflarning butun to'plamini taqdim etish uchun bir xil o'zgaruvchilar va miksinlardan foydalanadi.
O'zgaruvchilar va xaritalar ustunlar sonini, truba kengligini va suzuvchi ustunlarni boshlash uchun media so'rov nuqtasini aniqlaydi. Biz ulardan yuqorida hujjatlashtirilgan oldindan belgilangan grid sinflarini, shuningdek quyida sanab o'tilgan maxsus miksinlarni yaratish uchun foydalanamiz.
Miksinlar grid o'zgaruvchilari bilan birgalikda alohida panjara ustunlari uchun semantik CSS yaratish uchun ishlatiladi.
Siz o'zgaruvchilarni o'zingizning shaxsiy qiymatlaringizga o'zgartirishingiz mumkin yoki shunchaki aralashmalarni standart qiymatlari bilan ishlatishingiz mumkin. Ikki ustunli tartibni yaratish uchun standart sozlamalardan foydalanishga misol.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
O‘rnatilgan Sass o‘zgaruvchilari va xaritalarimizdan foydalanib, oldindan belgilangan grid sinflarini to‘liq moslashtirish mumkin. Qatlamlar sonini, media so'rov o'lchamlarini va konteyner kengligini o'zgartiring - keyin qayta kompilyatsiya qiling.
Grid ustunlari sonini Sass o'zgaruvchilari orqali o'zgartirish mumkin. $grid-columns
har bir alohida ustunning kengligini (foizda) yaratish uchun ishlatiladi, shu bilan birga ustun oluklari bo'ylab va $grid-gutter-width
bo'ylab teng bo'lingan to'xtash nuqtasiga xos kengliklarga ruxsat beradi .padding-left
padding-right
Ustunlarning o'zidan tashqariga o'tsangiz, siz panjara sathlari sonini ham sozlashingiz mumkin. Agar siz atigi to'rtta katakchani xohlasangiz, $grid-breakpoints
va $container-max-widths
ni shunga o'xshash narsaga yangilaysiz:
Sass o'zgaruvchilari yoki xaritalariga biron bir o'zgartirish kiritayotganda, o'zgarishlarni saqlashingiz va qayta kompilyatsiya qilishingiz kerak bo'ladi. Shunday qilib, ustunlar kengligi, ofsetlari va tartiblari uchun oldindan belgilangan panjara sinflarining yangi to'plami chiqariladi. Moslashtirilgan toʻxtash nuqtalaridan foydalanish uchun sezgir koʻrinish dasturlari ham yangilanadi. px
To'r qiymatlarini ( rem
, em
, yoki emas) o'rnatganingizga ishonch hosil qiling %
.