in English

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