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.

Op hierdie bladsy

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 xxl, 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, lg, xlen xxl.

Waar waarde een van is:

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

Die vertoonwaardes kan verander word deur die displaywaardes wat in $utilitiesdie SCSS gedefinieer is, te verander en weer saam te stel.

Die medianavrae beïnvloed skermwydtes met die gegewe breekpunt of groter . .d-lg-noneStel byvoorbeeld display: none;op lg, xl, en xxlskerms.

Voorbeelde

d-inlyn

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>

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,xxl}-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-none .d-xxl-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`
Versteek net op xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Slegs sigbaar op xxl	`.d-none .d-xxl-block`

versteek op lg en breër skerms

versteek op skerms kleiner as 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>

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

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

Utilities API

Vertoon nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

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