Source

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.

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 xl, 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_lgxl

Wou de Wäert ee vun ass:

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

D'Medien Ufroen beaflossen Écran Breet mat dem gegebene Breakpunkt oder méi grouss . Zum Beispill, .d-lg-nonesetzt display: none;op béide lgan xlSchiirme.

Beispiller

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

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 Element reaktiounsfäeger fir all Écrangréisst.

Fir Elementer ze verstoppen benotzt einfach d' .d-noneKlass oder eng vun de .d-{sm,md,lg,xl}-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-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
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
hide on screens wider than lg
verstoppen op Schiirme méi kleng wéi 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 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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

D'Dréck- an Affichage Klassen kënnen kombinéiert ginn.

Écran Nëmmen (nëmmen op Drécken verstoppen)
Print Only (Hide on screen only)
Verstoppen bis grouss op Écran, awer ëmmer op Drécken weisen
<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>