Source

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