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.

Á þessari síðu

Hvernig það virkar

Breyttu verðmæti displayeignarinnar 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á xstil 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}fyrir sm, md, lg, xlog xxl.

Þ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ð $displaysbreyta 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-nonestillir display: none;á lg, xl, og xxlskjái.

Dæmi

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

<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-nonebekkinn eða einn af .d-{sm,md,lg,xl,xxl}-noneflokkunum 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-*-noneflokk við .d-*-*flokk, til dæmis .d-none .d-md-block .d-xl-none .d-xxl-nonemun 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`

hide on lg and wider screens

fela sig á skjám minni en 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>

Birta á prenti

Breyttu displaygildi þátta þegar þú prentar með prentskjábúnaðarflokkunum okkar. Inniheldur stuðning við sömu displaygildi 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.

Aðeins skjár (Fela aðeins á prentun)

Print Only (Hide on screen only)

Fela allt að stórt á skjánum en sýna alltaf á prenti

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