Umumiy koʻrinish
Bootstrap loyihangizni joylashtirish uchun komponentlar va variantlar, jumladan, oʻrash konteynerlari, kuchli tarmoq tizimi, moslashuvchan media obyekti va sezgir yordamchi dasturlar sinflari.
Konteynerlar
Konteynerlar Bootstrap'dagi eng asosiy tartib elementi bo'lib , standart tarmoq tizimimizdan foydalanganda talab qilinadi . Konteynerlar tarkibini o'z ichiga olish, to'ldirish va (ba'zan) markazlashtirish uchun ishlatiladi. Konteynerlar ichkariga joylashtirilishi mumkin bo'lsa-da , ko'pchilik tartiblar ichki idishni talab qilmaydi.
Bootstrap uch xil konteyner bilan birga keladi:
.container
, bumax-width
har bir sezgir to'xtash nuqtasida a ni o'rnatadi.container-fluid
, buwidth: 100%
barcha to'xtash nuqtalarida.container-{breakpoint}
, buwidth: 100%
belgilangan to'xtash nuqtasiga qadar
Quyidagi jadvalda har bir konteynerning asl va har bir to'xtash nuqtasi bo'ylab qanday max-width
taqqoslanishi ko'rsatilgan ..container
.container-fluid
Ularni amalda ko'ring va ularni Grid misolimizda solishtiring .
Juda kichik <576px |
Kichik ≥576px |
Oʻrtacha ≥768px |
Katta ≥992px |
Juda katta ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Hammasi bir joyda
Bizning standart .container
sinfimiz sezgir, belgilangan kenglikdagi konteyner bo'lib, uning max-width
har bir to'xtash nuqtasida o'zgarishini anglatadi.
Suyuqlik
.container-fluid
Ko'rish oynasining butun kengligini qamrab olgan to'liq kenglikdagi konteyner uchun foydalaning .
Javobgar
Bootstrap v4.4 da sezgir konteynerlar yangi. Ular belgilangan to'xtash nuqtasiga yetguncha 100% kenglikdagi sinfni belgilashga imkon beradi, shundan so'ng biz max-width
yuqoriroq to'xtash nuqtalarining har biri uchun s ni qo'llaymiz. Masalan, to'xtash nuqtasiga yetguncha .container-sm
boshlash uchun 100% keng bo'lib , u erda , va bilan kengayadi .sm
md
lg
xl
Javob beruvchi uzilish nuqtalari
Bootstrap birinchi navbatda mobil bo'lish uchun ishlab chiqilganligi sababli, biz maketlarimiz va interfeyslarimiz uchun oqilona to'xtash nuqtalarini yaratish uchun bir nechta media so'rovlaridan foydalanamiz. Ushbu to'xtash nuqtalari asosan ko'rish maydonining minimal kengligiga asoslanadi va bizga ko'rish oynasi o'zgarganda elementlarni kattalashtirishga imkon beradi.
Bootstrap birinchi navbatda Sass manba fayllarida bizning joylashuvimiz, tarmoq tizimimiz va komponentlarimiz uchun quyidagi media so'rovlar diapazonlaridan yoki to'xtash nuqtalaridan foydalanadi.
Biz CSS manbasini Sassda yozganimiz sababli, barcha media so'rovlarimiz Sass mikslari orqali mavjud:
Biz vaqti-vaqti bilan boshqa yo'nalishda (belgilangan ekran o'lchami yoki undan kichikroq ) media so'rovlaridan foydalanamiz:
Brauzerlar hozirda diapazondagi kontekst so‘rovlarini qo‘llab-quvvatlamaganligi sababli, biz ushbu taqqoslashlar uchun yuqori aniqlikdagi qiymatlardan foydalangan holda fraksiyonel kenglikdagi (masalan, yuqori dpi qurilmalarda ma’lum sharoitlarda paydo bo‘lishi mumkin) prefikslar min-
vamax-
ko‘rish oynalari cheklovlari atrofida ishlaymiz. .
Yana bir bor, ushbu media so'rovlari Sass mikslari orqali ham mavjud:
Bundan tashqari, minimal va maksimal to'xtash nuqtasi kengliklaridan foydalangan holda ekran o'lchamlarining bitta segmentiga mo'ljallangan media so'rovlari va miksinlar mavjud.
Ushbu media so'rovlari Sass mikslari orqali ham mavjud:
Xuddi shunday, media so'rovlari bir nechta to'xtash nuqtasi kengligini qamrab olishi mumkin:
Bir xil ekran o'lchami diapazoniga mo'ljallangan Sass aralashmasi:
Z-indeks
Bir nechta Bootstrap komponentlari z-index
tarkibni tartibga solish uchun uchinchi o'qni taqdim etish orqali tartibni boshqarishga yordam beradigan CSS xususiyatidan foydalanadi. Biz Bootstrap-da navigatsiya, maslahatlar va popoverlar, modallar va boshqalarni to'g'ri joylashtirish uchun mo'ljallangan standart z-indeks shkalasidan foydalanamiz.
Bu yuqori qiymatlar ixtiyoriy sondan boshlanadi, mojarolarni oldini olish uchun etarlicha yuqori va o'ziga xosdir. Bizga qatlamli komponentlar bo'ylab standart to'plam kerak - maslahatlar, popoverlar, navbarlar, ochiladigan menyular, modallar - shuning uchun biz xatti-harakatlarda mos keladigan bo'lishimiz mumkin. 100
+ yoki + dan foydalana olmasligimiz uchun hech qanday sabab yo'q 500
.
Biz ushbu individual qadriyatlarni moslashtirishni rag'batlantirmaymiz; birini o'zgartirsangiz, barchasini o'zgartirishingiz kerak bo'ladi.
Komponentlar (masalan, kirish guruhlaridagi tugmalar va kirishlar) ichida bir-biriga o'xshash chegaralarni boshqarish uchun biz , ning past bir raqamli z-index
qiymatlaridan foydalanamiz va sukut bo'yicha, kursor va faol holatlar uchun 1
. Hover/focus/active rejimida biz ma'lum bir elementni birodar elementlar ustidagi chegarasini ko'rsatish uchun yuqori qiymatga ega bo'lamiz.2
3
z-index