Sýna eign
Breyttu skjágildi íhluta og fleira á fljótlegan og móttækilegan hátt með skjátólum okkar. Inniheldur stuðning fyrir sum af algengari gildunum, auk nokkurra aukahluta til að stjórna skjánum við prentun.
Hvernig það virkar
Breyttu verðmæti display
eignarinnar með móttækilegum skjáþjónustuflokkum okkar. Við styðjum viljandi aðeins undirmengi allra mögulegra gilda fyrir display
. Hægt er að sameina námskeið fyrir ýmis áhrif eftir þörfum.
Nótaskrift
Sýna gagnsemisflokka sem eiga við alla brotpunkta , frá xs
til xxl
, hafa enga brotpunkta skammstöfun í þeim. Þetta er vegna þess að þessir flokkar eru notaðir frá min-width: 0;
og upp og eru því ekki bundnir af fjölmiðlafyrirspurn. Hinir brotpunktarnir innihalda hins vegar brotpunkta skammstöfun.
Sem slíkir eru flokkarnir nefndir með sniðinu:
.d-{value}
fyrirxs
.d-{breakpoint}-{value}
fyrirsm
,md
,lg
,xl
ogxxl
.
Þar sem gildi er eitt af:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Hægt er að breyta skjágildunum með því að $displays
breyta breytunni og setja saman SCSS aftur.
Fjölmiðlafyrirspurnirnar hafa áhrif á skjábreidd með tilteknum brotpunkti eða stærri . Til dæmis, .d-lg-none
stillir display: none;
á lg
, xl
, og xxl
skjái.
Dæmi
<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>
Að fela þætti
Fyrir hraðari farsímavænni þróun, notaðu móttækilega skjáflokka til að sýna og fela þætti eftir tæki. Forðastu að búa til gjörólíkar útgáfur af sömu síðu, fela í staðinn þætti fyrir hverja skjástærð.
Til að fela þætti skaltu einfaldlega nota .d-none
bekkinn eða einn af .d-{sm,md,lg,xl,xxl}-none
flokkunum fyrir móttækileg skjáafbrigði.
Til að sýna einingu aðeins á tilteknu bili skjástærða er hægt að sameina einn .d-*-none
flokk við .d-*-*
flokk, til dæmis .d-none .d-md-block .d-xl-none .d-xxl-none
mun fela þáttinn fyrir allar skjástærðir nema á meðalstórum og stórum tækjum.
Skjástærð | bekk |
---|---|
Falinn á öllum | .d-none |
Falið aðeins á xs | .d-none .d-sm-block |
Falið aðeins á sm | .d-sm-none .d-md-block |
Falið aðeins á md | .d-md-none .d-lg-block |
Falið aðeins á lg | .d-lg-none .d-xl-block |
Falið aðeins á xl | .d-xl-none .d-xxl-block |
Falið aðeins á xxl | .d-xxl-none |
Sýnilegt á öllum | .d-block |
Sýnist aðeins á xs | .d-block .d-sm-none |
Sýnist aðeins á sm | .d-none .d-sm-block .d-md-none |
Sýnist aðeins á md | .d-none .d-md-block .d-lg-none |
Sýnist aðeins á lg | .d-none .d-lg-block .d-xl-none |
Sýnist aðeins á xl | .d-none .d-xl-block .d-xxl-none |
Sýnist aðeins á 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>
Birta á prenti
Breyttu display
gildi þátta þegar þú prentar með prentskjábúnaðarflokkunum okkar. Inniheldur stuðning við sömu display
gildi og móttækileg .d-*
veitur okkar.
.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
Hægt er að sameina prent- og skjátímana.
<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
Utilities API
Sýningartól eru lýst yfir í tólum API okkar í scss/_utilities.scss
. Lærðu hvernig á að nota utilities API.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),