in English

Vertoon eiendom

Wissel vinnig en responsief die vertoonwaarde van komponente en meer met ons vertoonhulpmiddels. Sluit ondersteuning vir sommige van die meer algemene waardes in, sowel as 'n paar ekstras vir die beheer van vertoning tydens druk.

Hoe dit werk

Verander die waarde van die displayeiendom met ons responsiewe vertoningsnutsklasse. Ons ondersteun doelbewus slegs 'n subset van alle moontlike waardes vir display. Klasse kan gekombineer word vir verskeie effekte soos jy nodig het.

Notasie

Vertoon nutsklasse wat op alle breekpunte van toepassing is , van xstot xl, het geen breekpunt-afkorting in nie. Dit is omdat daardie klasse van min-width: 0;en op toegepas word, en dus nie deur 'n medianavraag gebind word nie. Die oorblywende breekpunte bevat egter 'n breekpuntafkorting.

As sodanig word die klasse benoem deur die formaat te gebruik:

  • .d-{value}virxs
  • .d-{breakpoint}-{value}vir sm, md, lgen xl.

Waar waarde een van is:

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

Die vertoonwaardes kan verander word deur die veranderlike te $displaysverander en die SCSS weer saam te stel.

Die medianavrae beïnvloed skermwydtes met die gegewe breekpunt of groter . Byvoorbeeld, .d-lg-nonestelle display: none;op beide lgen xlskerms.

Voorbeelde

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

Versteek elemente

Vir vinniger selfoonvriendelike ontwikkeling, gebruik responsiewe vertoonklasse om elemente per toestel te wys en weg te steek. Vermy die skep van heeltemal verskillende weergawes van dieselfde webwerf, versteek eerder elemente responsief vir elke skermgrootte.

Om elemente weg te steek, gebruik eenvoudig die .d-noneklas of een van die .d-{sm,md,lg,xl}-noneklasse vir enige responsiewe skermvariasie.

Om 'n element slegs op 'n gegewe interval van skermgroottes te wys, kan jy een .d-*-noneklas met 'n .d-*-*klas kombineer, byvoorbeeld .d-none .d-md-block .d-xl-nonesal die element vir alle skermgroottes versteek behalwe op medium en groot toestelle.

Skerm grootte Klas
Versteek op almal .d-none
Versteek net op xs .d-none .d-sm-block
Versteek slegs op sm .d-sm-none .d-md-block
Versteek net op md .d-md-none .d-lg-block
Versteek net op lg .d-lg-none .d-xl-block
Versteek net op xl .d-xl-none
Sigbaar op almal .d-block
Slegs sigbaar op xs .d-block .d-sm-none
Slegs sigbaar op sm .d-none .d-sm-block .d-md-none
Slegs sigbaar op md .d-none .d-md-block .d-lg-none
Slegs sigbaar op lg .d-none .d-lg-block .d-xl-none
Slegs sigbaar op xl .d-none .d-xl-block
versteek op lg en breër skerms
versteek op skerms kleiner as 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>

Vertoon in druk

Verander die displaywaarde van elemente wanneer u druk met ons drukvertoonnutsklasse. Sluit ondersteuning in vir dieselfde displaywaardes as ons responsiewe .d-*nutsprogramme.

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

Die druk- en vertoonklasse kan gekombineer word.

Slegs skerm (Versteek slegs op druk)
Slegs druk (versteek slegs op skerm)
Versteek tot groot op die skerm, maar wys altyd op druk
<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>