Breakpoints va containers sinflar haqida tushuncha

Breakpoints va containers sinflar haqida tushuncha
O'n ikkita ustunli tizim, beshta standart javob beruvchi darajalar, 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.
U qanday ishlaydi
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 to'rning 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 .
Uch ustundan biri
Uch ustundan biri
Uch ustundan biri
Nusxalash
Copy

One of three columns

One of three columns

One of three columns

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. .containerTa'sirchan piksel kengligi yoki barcha ko'rish oynasi va qurilma o'lchamlari .container-fluiduchun foydalaning .width: 100%
  
• 
  Qatorlar ustunlar uchun o'ramlardir. Har bir ustunda paddingular orasidagi bo'shliqni boshqarish uchun gorizontal (oluk deb ataladi) mavjud. Keyin paddingsalbiy 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 widthavtomatik ravishda teng kenglikdagi ustunlar sifatida joylashadi. Masalan, to'rtta .col-smirodaning 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 widthfoizlarda o'rnatiladi, shuning uchun ular har doim asosiy elementga nisbatan suyuq va o'lchamli bo'ladi.
  
• 
  paddingUstunlar alohida ustunlar orasidagi oluklarni yaratish uchun gorizontalga ega, biroq siz marginsatrlardan va paddingustunlardan ustunlarni .no-gutterso'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-4kichik, oʻrta, katta va oʻta katta qurilmalar uchun amal qiladi, lekin birinchi xstoʻ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 .
Grid variantlari
Bootstrap ko'pgina o'lchamlarni aniqlash uchun ems 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 .rempx
Bootstrap grid tizimining aspektlari bir nechta qurilmalarda qanday ishlashini qulay jadval bilan ko'ring.