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 displaymulk 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.xsxlmin-width: 0;

Shunday qilib, sinflar format yordamida nomlanadi:

.d-{value}uchunxs
.d-{breakpoint}-{value}, sm, md, lgva uchun xl.

Bu erda qiymat quyidagilardan biri:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

Displey qiymatlari $displayso'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, ikkala va ekrandagi .d-lg-noneto'plamlar .display: none;lgxl

Misollar

d-inline

<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>

d-blok d-blok

<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 qurilmalar uchun qulayroq ishlab chiqish 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-nonesinf yoki sinflardan birini ishlating..d-{sm,md,lg,xl}-none

Elementni faqat ma'lum bir ekran o'lchamlari oralig'ida ko'rsatish uchun siz bitta .d-*-nonesinfni sinf bilan birlashtira olasiz .d-*-*, masalan .d-none .d-md-block .d-xl-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`
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`

lg va kengroq ekranlarda yashiring

lg dan kichikroq ekranlarda yashirish

<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

displayChop etish displey yordam dasturi sinflarimiz bilan chop etishda elementlarning qiymatini o'zgartiring . Bizning javob beruvchi yordamchi dasturlarimiz bilan bir xil displayqadriyatlarni qo'llab-quvvatlashni o'z ichiga oladi .d-*.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.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.

Faqat ekran (faqat chop etishda yashirish)

Faqat chop etish (faqat ekranda yashirish)

Ekranda katta hajmgacha yashiring, lekin har doim chop etishda ko'rsating

<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>