Source

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 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 xl, 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, og xl.

Þar sem gildi er eitt af:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

Fjölmiðlafyrirspurnirnar hafa áhrif á skjábreidd með tilteknum brotpunkti eða stærri . Til dæmis, .d-lg-nonesett display: none;á bæði lgog xlskjá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, í staðinn fela frumefni fyrir hverja skjástærð.

Til að fela þætti skaltu einfaldlega nota .d-nonebekkinn eða einn af .d-{sm,md,lg,xl}-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-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`
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`

hide on screens wider than lg

fela sig á skjám minni en lg

<div class="d-lg-none">hide on screens wider than lg</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-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>