in English

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

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-nonesady display: none;na obou lga xlobrazovkách.

Příklady

d-inline
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}-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
skrýt na lg a širších obrazovkách
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-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)
Pouze tisk (pouze skrýt na obrazovce)
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>