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.
Pakeiskite display
nuosavybė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į.
Rodyti naudingumo klases, kurios taikomos visiems lūžio taškams nuo xs
iki 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
,lg
irxl
.
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-none
ir display: none;
ekranuose .lg
xl
<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>
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-none
klasę arba vieną iš .d-{sm,md,lg,xl}-none
klasių bet kokiam reaguojančiam ekrano variantui.
Norėdami rodyti elementą tik tam tikru ekrano dydžių intervalu, galite sujungti vieną .d-*-none
klasę 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 |
<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>
Pakeiskite display
elementų vertę spausdindami naudodami mūsų spausdinimo rodymo naudingumo klases. Apima palaikymą toms pačioms display
vertybė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.
<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>