Source

Zobraziť vlastnosť

Rýchlo a citlivo prepínajte zobrazovanú hodnotu komponentov a ďalšie pomocou našich zobrazovacích nástrojov. Zahŕňa podporu niektorých bežnejších hodnôt, ako aj niektoré doplnky na ovládanie zobrazenia pri tlači.

Ako to funguje

Zmeňte hodnotu displayvlastnosti pomocou našich tried pomocných nástrojov pre responzívne zobrazenie. Zámerne podporujeme iba podmnožinu všetkých možných hodnôt pre display. Triedy je možné kombinovať pre rôzne efekty podľa potreby.

Notový zápis

Triedy obslužných programov zobrazenia, ktoré sa vzťahujú na všetky body prerušenia , od xsdo xl, nemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sú aplikované od min-width: 0;a vyššie, a teda nie sú viazané dopytom na médiá. Zostávajúce body prerušenia však obsahujú skratku bodu prerušenia.

Triedy sú preto pomenované vo formáte:

  • .d-{value}prexs
  • .d-{breakpoint}-{value}pre sm, md, lga xl.

Kde hodnota je jedna z:

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

Dopyty na médiá ovplyvňujú šírku obrazovky s daným bodom prerušenia alebo väčším . Napríklad .d-lg-nonesúpravy display: none;na oboch lga xlobrazovkách.

Príklady

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>

Skrytie prvkov

Pre rýchlejší vývoj prispôsobený pre mobilné zariadenia použite triedy responzívneho zobrazenia na zobrazenie a skrytie prvkov podľa zariadenia. Vyhnite sa vytváraniu úplne odlišných verzií tej istej lokality, namiesto toho skryte prvky responzívne pre každú veľkosť obrazovky.

Na skrytie prvkov jednoducho použite .d-nonetriedu alebo jednu z .d-{sm,md,lg,xl}-nonetried pre akúkoľvek responzívnu variáciu obrazovky.

Ak chcete zobraziť prvok iba na danom intervale veľkostí obrazoviek, môžete skombinovať jednu .d-*-nonetriedu s .d-*-*triedou, napríklad .d-none .d-md-block .d-xl-noneskryje prvok pre všetky veľkosti obrazoviek okrem stredných a veľkých zariadení.

Veľkosť obrazovky Trieda
Skryté na všetkých .d-none
Skryté iba na xs .d-none .d-sm-block
Skryté iba na sm .d-sm-none .d-md-block
Skryté iba na md .d-md-none .d-lg-block
Skryté iba na lg .d-lg-none .d-xl-block
Skryté iba na xl .d-xl-none
Viditeľné na všetkých .d-block
Viditeľné iba na xs .d-block .d-sm-none
Viditeľné iba na sm .d-none .d-sm-block .d-md-none
Viditeľné iba na md .d-none .d-md-block .d-lg-none
Viditeľné iba na lg .d-none .d-lg-block .d-xl-none
Viditeľné iba na xl .d-none .d-xl-block
hide on screens wider than lg
skryť na obrazovkách menších ako 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>

Zobraziť v tlači

Zmeňte displayhodnotu prvkov pri tlači pomocou našich tried nástrojov na zobrazenie tlače. Zahŕňa podporu pre rovnaké displayhodnoty ako naše responzívne .d-*nástroje.

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

Triedy tlače a zobrazenia je možné kombinovať.

Len obrazovka (skryť iba pri tlači)
Print Only (Hide on screen only)
Skryť až do veľkej veľkosti na obrazovke, ale vždy zobraziť na výtlačku 
<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>