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.

Op deze pagina

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 xxl, 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, xl, en xxl.

Waar de waarde een is van:

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

De weergegeven waarden kunnen worden gewijzigd door de $displaysvariabele te wijzigen en de SCSS opnieuw te compileren.

De mediaquery's zijn van invloed op schermbreedtes met het opgegeven breekpunt of groter . .d-lg-noneStelt bijvoorbeeld in display: none;op lg, xl, en xxlschermen.

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 de elementen responsief voor elke schermgrootte.

Om elementen te verbergen, gebruikt u gewoon de .d-noneklasse of een van de .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-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 .d-xxl-block`
Alleen verborgen op xxl	`.d-xxl-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 .d-xxl-none`
Alleen zichtbaar op xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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

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

Sass

Hulpprogramma's-API

Weergavehulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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