in English

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 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 . Bijvoorbeeld .d-lg-nonesets display: none;op beide lgen xlschermen.

Voorbeelden

d-inline
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}-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
verbergen op LG en bredere schermen
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-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)
Alleen afdrukken (alleen op scherm verbergen)
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>