Source

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.

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 xl, 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, lga xl.

Kde hodnota je jedna z:

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

Dotazy na média ovlivňují šířku obrazovky s daným bodem přerušení nebo větším . Například .d-lg-nonesady display: none;na obou lga xlobrazovká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 prvek 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}-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-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`
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`

hide on screens wider than lg

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

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