Zobrazit vlastnost

Rychle a pohotově přepínejte zobrazovanou hodnotu komponent a další pomocí našich zobrazovacích nástrojů. Zahrnuje podporu některých běžnějších hodnot a také některé doplňky pro ovládání zobrazení při tisku.

Na této straně

Jak to funguje

Změňte hodnotu displayvlastnosti pomocí našich tříd obslužných programů pro responzivní zobrazení. Záměrně podporujeme pouze podmnožinu všech možných hodnot pro display. Třídy lze podle potřeby kombinovat pro různé efekty.

Notový zápis

Třídy obslužných programů zobrazení, které se vztahují na všechny body přerušení , od xsdo xxl, nemají v sobě žádnou zkratku bodu přerušení. Je to proto, že tyto třídy jsou aplikovány od min-width: 0;a výše, a proto nejsou vázány dotazem na média. Zbývající zarážky však obsahují zkratku zarážek.

Třídy jsou proto pojmenovány ve formátu:

.d-{value}proxs
.d-{breakpoint}-{value}pro 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 lze změnit změnou $displaysproměnné a překompilováním SCSS.

Dotazy na média ovlivňují šířku obrazovky s daným bodem přerušení nebo větším . Například .d-lg-nonenastaví display: none;na lg, xl, a xxlobrazovkách.

Pří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>

Skrytí prvků

Pro rychlejší vývoj optimalizovaný pro mobily použijte responzivní třídy zobrazení pro zobrazení a skrytí prvků podle zařízení. Vyhněte se vytváření zcela odlišných verzí stejného webu, místo toho skryjte prvky responzivně pro každou velikost obrazovky.

Chcete-li prvky skrýt, jednoduše použijte .d-nonetřídu nebo jednu z .d-{sm,md,lg,xl,xxl}-nonetříd pro jakoukoli citlivou variantu obrazovky.

Chcete-li zobrazit prvek pouze na daném intervalu velikostí obrazovky, můžete zkombinovat jednu .d-*-nonetřídu s .d-*-*třídou, například .d-none .d-md-block .d-xl-none .d-xxl-noneskryje prvek pro všechny velikosti obrazovky kromě středních a velkých zařízení.

Velikost obrazovky	Třída
Skrytá na všech	`.d-none`
Skryté pouze na xs	`.d-none .d-sm-block`
Skryté pouze na sm	`.d-sm-none .d-md-block`
Skryto pouze na md	`.d-md-none .d-lg-block`
Skryté pouze na lg	`.d-lg-none .d-xl-block`
Skryté pouze na xl	`.d-xl-none .d-xxl-block`
Skryté pouze na xxl	`.d-xxl-none`
Viditelné na všech	`.d-block`
Viditelné pouze na xs	`.d-block .d-sm-none`
Viditelné pouze na sm	`.d-none .d-sm-block .d-md-none`
Viditelné pouze na md	`.d-none .d-md-block .d-lg-none`
Viditelné pouze na lg	`.d-none .d-lg-block .d-xl-none`
Viditelné pouze na xl	`.d-none .d-xl-block .d-xxl-none`
Viditelné pouze na xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

skrýt na obrazovkách menších než 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>

Zobrazit v tisku

Změňte displayhodnotu prvků při tisku pomocí našich tříd obslužných programů pro zobrazení tisku. Zahrnuje podporu pro stejné displayhodnoty jako naše responzivní .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

Třídy tisku a zobrazení lze kombinovat.

Pouze obrazovka (Skrýt pouze při tisku)

Print Only (Hide on screen only)

Skrýt až do velké velikosti na obrazovce, ale vždy zobrazit na tisku

<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

Utility API

Nástroje zobrazení jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.

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