Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

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 xxl, 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, 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 displayhodnôt definovaných v $utilitiesSCSS a opätovnou kompiláciou.

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
d-inline
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-blok d-blok
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
Skryté iba na xxl .d-xxl-none .d-xxl-block
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
skryť na lg a širších obrazovkách
skryť na obrazovkách menších ako lg
html
<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)
Iba tlačiť (iba skryť na obrazovke)
Skryť až do veľkej veľkosti na obrazovke, ale vždy zobraziť na výtlačku
html
<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
    ),