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.

Na tejto stránke

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 pomôcok zobrazenia, ktoré sa vzťahujú na všetky body prerušenia , od xsdo xxl, nemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sa aplikujú 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, lg, xla xxl.

Kde hodnota je jedna z:

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

Zobrazované hodnoty je možné zmeniť zmenou $displayspremennej a opätovným skompilovaním SCSS.

Dotazy na médiá ovplyvňujú šírku obrazovky s daným bodom prerušenia alebo väčším . Napríklad .d-lg-nonenastaví display: none;na lg, xl, a xxlobrazovká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 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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Skryté iba na xxl	`.d-xxl-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 .d-xxl-none`
Viditeľné iba na xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

skryť na obrazovkách menších ako 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>

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

Sass

Utilities API

Pomôcky na zobrazenie sú deklarované v našom rozhraní API nástrojov v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie API.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),