Ko'rsatish xususiyati
Displey yordamchi dasturlarimiz yordamida komponentlarning displey qiymatini va boshqalarni tez va sezgir tarzda almashtiring. Ba'zi keng tarqalgan qiymatlarni qo'llab-quvvatlashni, shuningdek, chop etishda displeyni boshqarish uchun ba'zi qo'shimchalarni o'z ichiga oladi.
U qanday ishlaydi
Bizning sezgir displey yordam dasturlari sinflarimiz bilan display
mulk qiymatini o'zgartiring . uchun barcha mumkin bo'lgan qiymatlarning faqat bir qismini qo'llab-quvvatlaymiz display
. Sinflar kerak bo'lganda turli effektlar uchun birlashtirilishi mumkin.
Belgilash
dan gacha bo'lgan barcha to'xtash nuqtalariga tegishli bo'lgan yordam sinflarini ko'rsatish , ularda uzilish nuqtasi qisqartmasi yo'q. Buning sababi shundaki, bu sinflar yuqoridan va yuqoridan qo'llaniladi va shuning uchun media so'rovi bilan bog'lanmaydi. Qolgan to'xtash nuqtalari esa to'xtash nuqtasi qisqartmasini o'z ichiga oladi.xs
xxl
min-width: 0;
Shunday qilib, sinflar format yordamida nomlanadi:
.d-{value}
uchunxs
.d-{breakpoint}-{value}
,sm
,md
,lg
vaxl
uchunxxl
.
Bu erda qiymat quyidagilardan biri:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Displey qiymatlari $displays
o'zgaruvchini o'zgartirish va SCSS ni qayta kompilyatsiya qilish orqali o'zgartirilishi mumkin.
Media so'rovlari berilgan to'xtash nuqtasi yoki undan kattaroq ekran kengligiga ta'sir qiladi . Masalan, , , va ekranlarni .d-lg-none
o'rnatadi .display: none;
lg
xl
xxl
Misollar
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Elementlarni yashirish
Tezroq mobil qurilmalarga mos rivojlanish uchun elementlarni qurilma bo‘yicha ko‘rsatish va yashirish uchun sezgir displey sinflaridan foydalaning. Bitta saytning mutlaqo boshqa versiyalarini yaratishdan saqlaning, o'rniga har bir ekran o'lchamiga mos ravishda elementlarni yashiring.
Elementlarni yashirish uchun har qanday sezgir ekran o'zgarishi uchun .d-none
sinf yoki sinflardan birini ishlating..d-{sm,md,lg,xl,xxl}-none
Elementni faqat ma'lum bir ekran o'lchamlari oralig'ida ko'rsatish uchun siz bitta .d-*-none
sinfni sinf bilan birlashtira olasiz .d-*-*
, masalan .d-none .d-md-block .d-xl-none .d-xxl-none
, o'rta va katta qurilmalardan tashqari barcha ekran o'lchamlari uchun elementni yashirasiz.
Ekran o'lchami | Sinf |
---|---|
Hammasiga yashirin | .d-none |
Faqat xs da yashirin | .d-none .d-sm-block |
Faqat sm da yashirin | .d-sm-none .d-md-block |
Faqat md da yashirin | .d-md-none .d-lg-block |
Faqat lg da yashirin | .d-lg-none .d-xl-block |
Faqat xl da yashirin | .d-xl-none .d-xxl-block |
Faqat xxl da yashirin | .d-xxl-none |
Hammaga ko'rinadi | .d-block |
Faqat xs da ko'rinadi | .d-block .d-sm-none |
Faqat sm da ko'rinadi | .d-none .d-sm-block .d-md-none |
Faqat md da ko'rinadi | .d-none .d-md-block .d-lg-none |
Faqat lg da ko'rinadi | .d-none .d-lg-block .d-xl-none |
Faqat xl da ko'rinadi | .d-none .d-xl-block .d-xxl-none |
Faqat xxl da ko'rinadi | .d-none .d-xxl-block |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Chop etishda ko'rsatish
display
Chop etish displey yordam dasturi sinflarimiz bilan chop etishda elementlarning qiymatini o'zgartiring . Bizning sezgir yordamchi dasturlarimiz bilan bir xil display
qadriyatlarni qo'llab-quvvatlashni o'z ichiga oladi .d-*
.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Chop etish va namoyish qilish sinflari birlashtirilishi mumkin.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Sass
Utilities API
Displey yordam dasturlari bizning API-da e'lon qilingan scss/_utilities.scss
. API yordam dasturlarini qanday ishlatishni bilib oling.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),