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

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