Source

Eigenschap weergeven

Wissel snel en responsief de weergavewaarde van componenten en meer met onze weergavehulpprogramma's. Bevat ondersteuning voor enkele van de meest voorkomende waarden, evenals enkele extra's voor het regelen van de weergave tijdens het afdrukken.

Hoe het werkt

Wijzig de waarde van de displayeigenschap met onze responsieve hulpprogrammaklassen voor weergave. We ondersteunen met opzet alleen een subset van alle mogelijke waarden voor display. De lessen kunnen naar behoefte worden gecombineerd voor verschillende effecten.

Notatie

Weerstandsklassen die van toepassing zijn op alle breekpunten , van xstot xl, hebben geen breekpuntafkorting. Dit komt omdat die klassen vanaf min-width: 0;en hoger worden toegepast en dus niet gebonden zijn aan een mediaquery. De overige breekpunten bevatten echter wel een breekpuntafkorting.

Als zodanig worden de klassen benoemd met behulp van het formaat:

.d-{value}voorxs
.d-{breakpoint}-{value}voor sm, md, lg, en xl.

Waar de waarde een is van:

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

De mediaquery's hebben effect op schermbreedtes met het opgegeven breekpunt of groter . Bijvoorbeeld .d-lg-nonesets display: none;op beide lgen xlschermen.

Voorbeelden

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>

Elementen verbergen

Gebruik voor een snellere mobielvriendelijke ontwikkeling responsieve weergaveklassen voor het weergeven en verbergen van elementen per apparaat. Vermijd het maken van totaal verschillende versies van dezelfde site, maar verberg in plaats daarvan het element responsief voor elke schermgrootte.

Om elementen te verbergen, gebruikt u gewoon de .d-noneklasse of een van de .d-{sm,md,lg,xl}-noneklassen voor elke responsieve schermvariatie.

Om een element alleen op een bepaald interval van schermformaten weer te geven, kunt u een .d-*-noneklasse combineren met een .d-*-*klasse, bijvoorbeeld .d-none .d-md-block .d-xl-nonehet element verbergen voor alle schermformaten behalve op middelgrote en grote apparaten.

Scherm grootte	Klas
Voor iedereen verborgen	`.d-none`
Alleen verborgen op xs	`.d-none .d-sm-block`
Alleen verborgen op sm	`.d-sm-none .d-md-block`
Alleen verborgen op md	`.d-md-none .d-lg-block`
Alleen verborgen op lg	`.d-lg-none .d-xl-block`
Alleen verborgen op xl	`.d-xl-none`
Zichtbaar voor iedereen	`.d-block`
Alleen zichtbaar op xs	`.d-block .d-sm-none`
Alleen zichtbaar op sm	`.d-none .d-sm-block .d-md-none`
Alleen zichtbaar op md	`.d-none .d-md-block .d-lg-none`
Alleen zichtbaar op lg	`.d-none .d-lg-block .d-xl-none`
Alleen zichtbaar op xl	`.d-none .d-xl-block`

hide on screens wider than lg

verbergen op schermen kleiner dan 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>

Weergeven in print

Wijzig de displaywaarde van elementen bij het afdrukken met onze hulpprogrammaklassen voor afdrukweergave. Bevat ondersteuning voor dezelfde displaywaarden als onze responsieve .d-*hulpprogramma's.

.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

De print- en displayklassen kunnen worden gecombineerd.

Alleen scherm (alleen verbergen bij afdrukken)

Print Only (Hide on screen only)

Verbergen tot groot op het scherm, maar altijd weergeven op print

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