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.

Na tej strani

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 xxl, 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, xl, in xxl.

Kjer je vrednost ena od:

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

Prikazane vrednosti je mogoče spremeniti s spreminjanjem displayvrednosti, definiranih v $utilitiesSCSS, in ponovnim prevajanjem.

Medijske poizvedbe vplivajo na širine zaslona z dano prelomno točko ali večjo . Na primer, .d-lg-nonenastavitve display: none;na zaslonih lg, xlin .xxl

Primeri

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-blok d-blok

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Skrivanje elementov

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

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

Če želite prikazati element samo v danem intervalu velikosti zaslona, lahko združite en .d-*-nonerazred z .d-*-*razredom, na primer .d-none .d-md-block .d-xl-none .d-xxl-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`
Skrit samo na xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Vidno samo na xxl	`.d-none .d-xxl-block`

skrij na lg in širših zaslonih

skrij na zaslonih, manjših od lg

html

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

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-grid
.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)

Samo tiskanje (samo skrij na zaslonu)

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

html

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

Sass

API za pripomočke

Prikazni pripomočki so navedeni v našem API-ju za pripomočke v scss/_utilities.scss. Naučite se uporabljati API za pripomočke.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),