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 weergegeven waarden kunnen worden gewijzigd door de$displays variable and recompiling the SCSS.

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

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
verbergen op schermen die breder zijn dan lg
hide on screens smaller than 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>

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