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 displaykinnisvara 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 xskuni 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}jaoks sm, md, lg, ja xl.

Kui väärtus on üks järgmistest:

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

Meediapäringud mõjutavad ekraanilaiust antud või suurema katkestuspunktiga . Näiteks .d-lg-nonekomplektid display: none;nii lgja xlekraanidel.

Näited

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

<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 element iga ekraanisuuruse jaoks reageerivalt.

Elementide peitmiseks kasutage lihtsalt .d-noneklassi või mõnda .d-{sm,md,lg,xl}-noneklassi mis tahes tundliku ekraanivariatsiooni jaoks.

Elemendi kuvamiseks ainult teatud ekraanisuuruste intervallil saate ühendada ühe .d-*-noneklassi .d-*-*klassiga, näiteks .d-none .d-md-block .d-xl-nonepeidab elemendi kõigi ekraanisuuruste jaoks, välja arvatud keskmiste 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`

hide on screens wider than lg

peida ekraanidel, mis on väiksemad kui lg

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

Kuva trükis

Muutke displayelementide väärtust printimisel meie prindikuvamise utiliidiklassidega. Sisaldab tuge samadele displayvää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.

Ainult ekraan (peida ainult printimisel)

Print Only (Hide on screen only)

Peida ekraanil kuni suurelt, kuid kuva alati prindituna

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