Lastnost prikaza

Hitro in odzivno preklapljajte med prikazano vrednostjo komponent in več z našimi pripomočki za prikaz. Vključuje podporo za nekatere pogostejše vrednosti in nekaj dodatkov za nadzor zaslona med tiskanjem.

Kako deluje

Spremenite vrednost displaylastnosti z našimi odzivnimi uporabniškimi razredi zaslona. Namenoma podpiramo samo podnabor vseh možnih vrednosti za display. Razrede lahko kombinirate za različne učinke, kot jih potrebujete.

Notacija

Razredi pripomočkov za prikaz, ki veljajo za vse prekinitvene točke , od xsdo xl, v sebi nimajo okrajšav prekinitvene točke. To je zato, ker se ti razredi uporabljajo od min-width: 0;in navzgor in zato niso vezani na predstavnostno poizvedbo. Preostale mejne točke pa vključujejo okrajšavo mejne točke.

Kot taki so razredi poimenovani v obliki:

.d-{value}zaxs
.d-{breakpoint}-{value}za sm, md, lg, in xl.

Kjer je vrednost ena od:

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

Medijske poizvedbe vplivajo na širine zaslona z dano prelomno točko ali večjo . Na primer, .d-lg-nonekompleti display: none;na obeh lgin xlzaslonih.

Primeri

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>

Skrivanje elementov

Za hitrejši razvoj, prijazen do mobilnih naprav, uporabite razrede odzivnega zaslona za prikazovanje in skrivanje elementov glede na napravo. Izogibajte se ustvarjanju popolnoma različnih različic istega mesta, namesto tega skrijte element odzivno za vsako velikost zaslona.

Če želite skriti elemente, preprosto uporabite .d-nonerazred ali enega od .d-{sm,md,lg,xl}-nonerazredov za katero koli različico odzivnega zaslona.

Če želite prikazati element samo v določenem intervalu velikosti zaslona, lahko združite en .d-*-nonerazred z .d-*-*razredom, na primer .d-none .d-md-block .d-xl-noneskrit bo element za vse velikosti zaslona, razen v srednjih in velikih napravah.

Velikost zaslona	Razred
Skrit na vseh	`.d-none`
Skrit samo na xs	`.d-none .d-sm-block`
Skrit samo na sm	`.d-sm-none .d-md-block`
Skrit samo na md	`.d-md-none .d-lg-block`
Skrit samo na lg	`.d-lg-none .d-xl-block`
Skrit samo na xl	`.d-xl-none`
Vidno na vseh	`.d-block`
Vidno samo na xs	`.d-block .d-sm-none`
Vidno le na sm	`.d-none .d-sm-block .d-md-none`
Vidno samo na md	`.d-none .d-md-block .d-lg-none`
Vidno samo na lg	`.d-none .d-lg-block .d-xl-none`
Vidno samo na xl	`.d-none .d-xl-block`

hide on screens wider than lg

skrij na zaslonih, manjših od 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>

Prikaz v tisku

Spremenite displayvrednost elementov pri tiskanju z našimi razredi pripomočkov za prikaz tiskanja. Vključuje podporo za enake displayvrednosti kot naši odzivni .d-*pripomočki.

.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

Razred tiskanja in prikaza je mogoče združiti.

Samo zaslon (samo pri tiskanju skrij)

Print Only (Hide on screen only)

Skrij do velikega na zaslonu, vendar vedno prikaži na tiskanem

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