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 display
vlastnosti 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 xs
do 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}
prosm
,md
,lg
,xl
axxl
.
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 $displays
promě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-none
nastaví display: none;
na lg
, xl
, a xxl
obrazovkách.
Příklady
<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>
<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-none
třídu nebo jednu z .d-{sm,md,lg,xl,xxl}-none
tříd pro jakoukoli citlivou variantu obrazovky.
Chcete-li zobrazit prvek pouze na daném intervalu velikostí obrazovky, můžete zkombinovat jednu .d-*-none
třídu s .d-*-*
třídou, například .d-none .d-md-block .d-xl-none .d-xxl-none
skryje 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 |
<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 display
hodnotu prvků při tisku pomocí našich tříd obslužných programů pro zobrazení tisku. Zahrnuje podporu pro stejné display
hodnoty 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.
<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
),