Grid tizimi haqida. Grid qanday ishlaydi, Eng keng tarqalgan misollar

Grid qanday ishlaydi
Buni ajratib ko'rsatadigan bo'lsak, grid tizimi qanday birlashadi:

1. 
   Bizning tarmoq oltita sezgir to'xtash nuqtasini qo'llab-quvvatlaydi . To'xtash nuqtalari media so'rovlariga asoslanadi min-width, ya'ni ular to'xtash nuqtasiga va undan yuqori bo'lgan barchaga ta'sir qiladi (masalan , , , , va .col-sm-4uchun amal qiladi ). Bu har bir to'xtash nuqtasi bo'yicha konteyner va ustun o'lchamlarini va xatti-harakatlarini boshqarishingiz mumkinligini anglatadi. smmdlgxlxxl
   

2. 
   Konteynerlarni markazga qo'ying va tarkibingizni gorizontal ravishda to'ldiring. Barcha koʻrish maydonlari va qurilmalari uchun .containersezgir piksel kengligi yoki sezgir konteyner (masalan, ) suyuqlik va piksel kengliklarining kombinatsiyasi uchun foydalaning ..container-fluidwidth: 100%.container-md
   

3. 
   Qatorlar ustunlar uchun o'ramlardir. Har bir ustunda paddingular orasidagi bo'shliqni boshqarish uchun gorizontal (oluk deb ataladi) mavjud. paddingKeyin ustunlaringizdagi kontentning chap tomonda vizual ravishda tekislanishini ta'minlash uchun manfiy chetlari bo'lgan qatorlarda bunga qarshi turadi. Tarkibingiz oralig'ini o'zgartirish uchun satrlar ustun o'lchamlarini va oluk sinflarini bir xilda qo'llash uchun modifikator sinflarini ham qo'llab-quvvatlaydi.
   

4. 
   Ustunlar nihoyatda moslashuvchan. Har bir satrda 12 ta shablon ustunlari mavjud bo'lib, ular har qanday ustunlar sonini qamrab oladigan elementlarning turli kombinatsiyalarini yaratishga imkon beradi. Ustun sinflari qo'yiladigan shablon ustunlari sonini ko'rsatadi (masalan, col-4to'rtta oraliq). widths foizlarda o'rnatiladi, shuning uchun siz doimo bir xil nisbiy o'lchamga ega bo'lasiz.
   

5. 
   Oluklar ham sezgir va sozlanishi. Gutter sinflari barcha to'xtash nuqtalarida mavjud bo'lib, ularning o'lchamlari bizning chekka va to'ldirish oralig'imiz bilan bir xil. Gorizontal oluklarni .gx-*sinflar bilan, vertikal oluklarni bilan .gy-*yoki barcha oluklarni .g-*sinflar bilan almashtiring. .g-0oluklarni olib tashlash uchun ham mavjud.
   

6. 
   SCSS o'zgaruvchilari, xaritalar va miksinlar tarmoqni quvvat bilan ta'minlaydi. Agar siz Bootstrap-da oldindan belgilangan grid sinflaridan foydalanishni xohlamasangiz, ko'proq semantik belgilar bilan o'zingizni yaratish uchun bizning tarmoq manbamiz Sassdan foydalanishingiz mumkin. Biz, shuningdek, siz uchun yanada ko'proq moslashuvchanlik uchun ushbu SCSS o'zgaruvchilarni ishlatish uchun ba'zi CSS maxsus xususiyatlarini o'z ichiga olamiz.