Lastnost prikaza
Hitro in odzivno preklapljajte med prikazano vrednostjo komponent in več z našimi pripomočki za prikaz. Vključuje podporo za nekatere pogostejše vrednosti in nekaj dodatkov za nadzor zaslona med tiskanjem.
Kako deluje
Spremenite vrednost display
lastnosti z našimi odzivnimi uporabniškimi razredi zaslona. Namenoma podpiramo samo podnabor vseh možnih vrednosti za display
. Razrede lahko kombinirate za različne učinke, kot jih potrebujete.
Notacija
Razredi pripomočkov za prikaz, ki veljajo za vse prekinitvene točke , od xs
do xxl
, v sebi nimajo okrajšav prekinitvene točke. To je zato, ker se ti razredi uporabljajo od min-width: 0;
in navzgor in zato niso vezani na predstavnostno poizvedbo. Preostale mejne točke pa vključujejo okrajšavo mejne točke.
Kot taki so razredi poimenovani v obliki:
.d-{value}
zaxs
.d-{breakpoint}-{value}
zasm
,md
,lg
,xl
, inxxl
.
Kjer je vrednost ena od:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Prikazane vrednosti je mogoče spremeniti s spreminjanjem $displays
spremenljivke in ponovnim prevajanjem SCSS.
Medijske poizvedbe vplivajo na širine zaslona z dano prelomno točko ali večjo . Na primer, .d-lg-none
nastavitve display: none;
na zaslonih lg
, xl
in .xxl
Primeri
<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>
Skrivanje elementov
Za hitrejši razvoj, prijazen do mobilnih naprav, uporabite razrede odzivnega zaslona za prikazovanje in skrivanje elementov glede na napravo. Izogibajte se ustvarjanju popolnoma različnih različic istega spletnega mesta, namesto tega skrijte elemente odzivno za vsako velikost zaslona.
Če želite skriti elemente, preprosto uporabite .d-none
razred ali enega od .d-{sm,md,lg,xl,xxl}-none
razredov za katero koli različico odzivnega zaslona.
Če želite prikazati element samo v danem intervalu velikosti zaslona, lahko združite en .d-*-none
razred z .d-*-*
razredom, na primer .d-none .d-md-block .d-xl-none .d-xxl-none
skrit bo element za vse velikosti zaslona, razen v srednjih in velikih napravah.
Velikost zaslona | Razred |
---|---|
Skrit na vseh | .d-none |
Skrit samo na xs | .d-none .d-sm-block |
Skrit samo na sm | .d-sm-none .d-md-block |
Skrit samo na md | .d-md-none .d-lg-block |
Skrit samo na lg | .d-lg-none .d-xl-block |
Skrit samo na xl | .d-xl-none .d-xxl-block |
Skrit samo na xxl | .d-xxl-none |
Vidno na vseh | .d-block |
Vidno samo na xs | .d-block .d-sm-none |
Vidno le na sm | .d-none .d-sm-block .d-md-none |
Vidno samo na md | .d-none .d-md-block .d-lg-none |
Vidno samo na lg | .d-none .d-lg-block .d-xl-none |
Vidno samo na xl | .d-none .d-xl-block .d-xxl-none |
Vidno samo 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>
Prikaz v tisku
Spremenite display
vrednost elementov pri tiskanju z našimi razredi pripomočkov za prikaz tiskanja. Vključuje podporo za enake display
vrednosti kot naši odzivni .d-*
pripomočki.
.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
Razred tiskanja in prikaza je mogoče združiti.
<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
API za pripomočke
Prikazni pripomočki so navedeni v našem API-ju za pripomočke v scss/_utilities.scss
. Naučite se uporabljati API za pripomočke.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),