Eegentum weisen

Schnell a reaktiounsfäeger de Displaywäert vun de Komponenten a méi mat eise Display-Utilities wiesselen. Ëmfaasst Ënnerstëtzung fir e puer vun de méi gemeinsam Wäerter, souwéi e puer Extras fir d'Kontrolléiere vum Display beim Drock.

Op dëser Säit

Wéi et funktionnéiert

Ännert de Wäert vun der displayImmobilie mat eise reaktiounsfäeger Display Utility Klassen. Mir ënnerstëtzen bewosst nëmmen en Ënnerdeel vun all méigleche Wäerter fir display. Klassen kënne fir verschidden Effekter kombinéiert ginn wéi Dir braucht.

Notatioun

Weist Utility Klassen déi op all Breakpoints gëllen , vun xsbis xxl, hu keng Breakpoint Ofkierzung dran. Dëst ass well dës Klassen vun min-width: 0;an erop applizéiert ginn, an dofir net vun enger Medienufro gebonnen sinn. Déi reschtlech Breakpunkter enthalen awer eng Breakpoint Ofkierzung.

Als esou ginn d'Klassen mam Format benannt:

.d-{value}firxs
.d-{breakpoint}-{value}fir sm,,,, an . md_ lg_xlxxl

Wou de Wäert ee vun ass:

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

D'Displaywäerter kënnen geännert ginn andeems d' displayWäerter geännert ginn, déi $utilitiesan der SCSS definéiert sinn an nei kompiléieren.

D'Medien Ufroen beaflossen Écran Breet mat de gegebene Breakpoint oder méi grouss . Zum Beispill, .d-lg-nonesetzt display: none;op lg, xl, an xxlSchiirme.

Beispiller

d-inline

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

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>

Verstoppen Elementer

Fir méi séier mobil-frëndlech Entwécklung, benotzt reaktiounsfäeger Display Klassen fir Elementer per Apparat ze weisen an ze verstoppen. Vermeit komplett verschidde Versioune vum selwechte Site ze kreéieren, amplaz verstoppt Elementer reaktiounsfäeger fir all Écrangréisst.

Fir Elementer ze verstoppen benotzt einfach d' .d-noneKlass oder eng vun de .d-{sm,md,lg,xl,xxl}-noneKlassen fir all reaktiounsfäeger Écran Variatioun.

Fir en Element nëmmen op engem bestëmmten Intervall vun Écran Gréissten ze weisen, kënnt Dir eng .d-*-noneKlass mat enger .d-*-*Klass kombinéieren, zum Beispill .d-none .d-md-block .d-xl-none .d-xxl-noneverstoppen d'Element fir all Écrangréissten ausser op mëttel- a groussen Apparater.

Écran Gréisst	Klass
Verstoppt op all	`.d-none`
Verstoppt nëmmen op xs	`.d-none .d-sm-block`
Verstoppt nëmmen op sm	`.d-sm-none .d-md-block`
Verstoppt nëmmen op md	`.d-md-none .d-lg-block`
Verstoppt nëmmen op lg	`.d-lg-none .d-xl-block`
Verstoppt nëmmen op xl	`.d-xl-none`
Verstoppt nëmmen op xxl	`.d-xxl-none .d-xxl-block`
Siichtbar op all	`.d-block`
Siichtbar nëmmen op xs	`.d-block .d-sm-none`
Siichtbar nëmmen op sm	`.d-none .d-sm-block .d-md-none`
Siichtbar nëmmen op md	`.d-none .d-md-block .d-lg-none`
Siichtbar nëmmen op lg	`.d-none .d-lg-block .d-xl-none`
Siichtbar nëmmen op xl	`.d-none .d-xl-block .d-xxl-none`
Siichtbar nëmmen op xxl	`.d-none .d-xxl-block`

verstoppen op LG a méi breet Schiirme

verstoppen op Schiirme méi kleng wéi 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>

Display am Drock

Ännert de displayWäert vun Elementer beim Drock mat eise Print Display Utility Klassen. Ëmfaasst Ënnerstëtzung fir déi selwecht displayWäerter wéi eis reaktiounsfäeger .d-*Utilities.

.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

D'Drécken an d'Display Klassen kënnen kombinéiert ginn.

Écran Nëmmen (nëmmen op Drécken verstoppen)

Nëmmen Drécken (nëmmen um Écran verstoppen)

Verstoppen bis grouss op Écran, awer ëmmer op Drécken weisen

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

Display Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

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