Source

Rodyti nuosavybę

Greitai ir reaguodami perjunkite komponentų rodymo reikšmę ir dar daugiau naudodami mūsų ekrano priemones. Apima kai kurių įprastų verčių palaikymą, taip pat kai kuriuos priedus, skirtus valdyti ekraną spausdinant.

Kaip tai veikia

Pakeiskite displaynuosavybės vertę naudodami mūsų interaktyvias vaizdo naudingumo klases. Sąmoningai palaikome tik visų galimų reikšmių poaibį display. Klasės gali būti derinamos įvairiems efektams pagal poreikį.

Žymėjimas

Rodyti naudingumo klases, kurios taikomos visiems lūžio taškams nuo xsiki xl, jose nėra lūžio taško santrumpos. Taip yra todėl, kad šios klasės taikomos nuo min-width: 0;pradžios iki galo ir todėl nėra susietos su medijos užklausa. Tačiau likusiuose lūžio taškuose yra lūžio taško santrumpa.

Taigi klasės pavadintos tokiu formatu:

.d-{value}dėlxs
.d-{breakpoint}-{value}, sm, md, lgir xl.

Kai vertė yra viena iš:

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

Medijos užklausos paveikia ekrano plotį su nurodytu ar didesniu lūžio tašku . Pavyzdžiui, rinkiniai .d-lg-noneir display: none;ekranuose .lgxl

Pavyzdžiai

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

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

Slėpti elementai

Norėdami greičiau kurti mobiliesiems pritaikytą kūrimą, naudokite reaguojančias rodymo klases elementams pagal įrenginį rodyti ir slėpti. Nekurkite visiškai skirtingų tos pačios svetainės versijų, o slėpkite elementą pagal kiekvieną ekrano dydį.

Norėdami paslėpti elementus, tiesiog naudokite .d-noneklasę arba vieną iš .d-{sm,md,lg,xl}-noneklasių bet kokiam reaguojančiam ekrano variantui.

Norėdami rodyti elementą tik tam tikru ekrano dydžių intervalu, galite sujungti vieną .d-*-noneklasę su .d-*-*klase, pavyzdžiui .d-none .d-md-block .d-xl-none, elementas bus paslėptas visų dydžių ekranuose, išskyrus vidutinius ir didelius įrenginius.

Ekrano dydis	Klasė
Paslėpta ant visų	`.d-none`
Paslėpta tik ant xs	`.d-none .d-sm-block`
Paslėpta tik ant sm	`.d-sm-none .d-md-block`
Paslėpta tik md	`.d-md-none .d-lg-block`
Paslėpta tik lg	`.d-lg-none .d-xl-block`
Paslėpta tik xl	`.d-xl-none`
Matoma ant visų	`.d-block`
Matoma tik ant xs	`.d-block .d-sm-none`
Matoma tik sm	`.d-none .d-sm-block .d-md-none`
Matoma tik md	`.d-none .d-md-block .d-lg-none`
Matoma tik lg	`.d-none .d-lg-block .d-xl-none`
Matoma tik ant xl	`.d-none .d-xl-block`

hide on screens wider than lg

pasislėpti mažesniuose nei lg ekranuose

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Rodyti spaudoje

Pakeiskite displayelementų vertę spausdindami naudodami mūsų spausdinimo rodymo naudingumo klases. Apima palaikymą toms pačioms displayvertybėms kaip ir mūsų reaguojančios .d-*komunalinės paslaugos.

.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

Spausdinimo ir demonstravimo klases galima derinti.

Tik ekranas (slėpti tik spausdinant)

Print Only (Hide on screen only)

Slėpti iki didelio ekrane, bet visada rodyti spausdinant

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