Kuva omadus
Lülitage komponentide kuvaväärtust ja muudki kiiresti ja reageerivalt meie kuvautiliitidega. Sisaldab tuge mõnele enamlevinud väärtusele, aga ka mõningaid lisasid printimise ajal kuva juhtimiseks.
Kuidas see töötab
Muutke display
kinnisvara väärtust meie tundlike kuvatavate kasulike klasside abil. Toetame sihilikult ainult kõigi võimalike väärtuste alamhulka display
. Klassid saab kombineerida erinevate efektide saamiseks vastavalt vajadusele.
Märge
Kuva kasulikud klassid, mis kehtivad kõikidele murdepunktidele alates xs
kuni xl
, ei sisalda murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0;
ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.
Sellisena nimetatakse klassid järgmises vormingus:
.d-{value}
jaoksxs
.d-{breakpoint}-{value}
jaokssm
,md
,lg
, jaxl
.
Kui väärtus on üks järgmistest:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Kuvatavaid väärtusi saab muuta $displays
muutuja muutmise ja SCSS-i uuesti kompileerimisega.
Meediapäringud mõjutavad antud või suurema katkestuspunktiga ekraani laiust . Näiteks .d-lg-none
komplektid display: none;
nii lg
ja xl
ekraanidel.
Näited
<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>
Elementide peitmine
Kiiremaks mobiilisõbralikuks arendamiseks kasutage seadmete kaupa elementide kuvamiseks ja peitmiseks responsiivseid kuvaklasse. Vältige samast saidist täiesti erinevate versioonide loomist, selle asemel peitke elemendid iga ekraanisuuruse jaoks reageerivalt.
Elementide peitmiseks kasutage lihtsalt .d-none
klassi või üht .d-{sm,md,lg,xl}-none
klassi mis tahes tundliku ekraanivariatsiooni jaoks.
Elemendi kuvamiseks ainult teatud ekraanisuuruste intervallil saate ühendada ühe .d-*-none
klassi .d-*-*
klassiga, näiteks .d-none .d-md-block .d-xl-none
peidab elemendi kõigi ekraanisuuruste jaoks, välja arvatud keskmise ja suurte seadmete puhul.
Ekraani suurus | Klass |
---|---|
Kõigile peidetud | .d-none |
Peidetud ainult xs-il | .d-none .d-sm-block |
Peidetud ainult sm | .d-sm-none .d-md-block |
Peidetud ainult md-l | .d-md-none .d-lg-block |
Peidetud ainult lg-l | .d-lg-none .d-xl-block |
Peidetud ainult xl-l | .d-xl-none |
Nähtav kõigil | .d-block |
Nähtav ainult xs-il | .d-block .d-sm-none |
Nähtav ainult sm-l | .d-none .d-sm-block .d-md-none |
Nähtav ainult md-l | .d-none .d-md-block .d-lg-none |
Nähtav ainult lg-l | .d-none .d-lg-block .d-xl-none |
Nähtav ainult xl-l | .d-none .d-xl-block |
<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>
Kuva trükis
Muutke display
elementide väärtust printimisel meie prindikuvamise utiliidiklassidega. Sisaldab tuge samadele display
väärtustele kui meie reageerivad .d-*
utiliidid.
.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
Trüki- ja kuvamisklasse saab kombineerida.
<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>