Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

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 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 $displaysspremenljivke in ponovnim prevajanjem SCSS.

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
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 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 .d-xxl-block
Skrit samo na xxl .d-xxl-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 .d-xxl-none
Vidno samo na xxl .d-none .d-xxl-block
hide on lg and wider screens
skrij na zaslonih, manjših od lg
<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)
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>

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