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 medianavrae beïnvloed skermwydtes met die gegewe breekpunt of groter . Byvoorbeeld, .d-lg-nonestelle display: none;op beide lgen xlskerms.

Voorbeelde

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

hide on screens wider than lg

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

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)

Print Only (Hide on screen only)

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>