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.

Ushbu sahifada

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

Shunday qilib, sinflar format yordamida nomlanadi:

.d-{value}uchunxs
.d-{breakpoint}-{value}, sm, md, lgva xluchun xxl.

Bu erda qiymat quyidagilardan biri:

none
inline
inline-block
block
grid
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, , , va ekranlarni .d-lg-noneo'rnatadi .display: none;lgxlxxl

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 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-nonesinf 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-*-nonesinfni 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`

hide on lg and wider screens

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

Faqat ekran (faqat chop etishda yashirish)

Print Only (Hide on screen only)

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>

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