Displei di prɔpati

Kwik ɛn rispɔnsiv wan toggle di displei valyu fɔ kɔmpɔnɛnt dɛn ɛn mɔ wit wi displei yutiliti dɛn. Inklud sɔpɔt fɔ sɔm pan di valyu dɛn we kɔmɔn mɔ, ɛn sɔm ɛkstra dɛn fɔ kɔntrol displei we yu de print.

Na dis pej

Aw i de wok

Chenj di valyu fɔ di displayprɔpati wit wi rispɔnsiv displei yutiliti klas dɛn. Wi de sɔpɔt bay wilful ɔl wan sɔbsɛt fɔ ɔl di pɔsibul valyu dɛn fɔ display. Yu kin jɔyn klas dɛn fɔ difrɛn ifɛkt dɛn as yu nid.

Noteshɔn fɔ di Baybul

Displei yutiliti klas dɛn we de aplay to ɔl di brekpɔynt dɛn , frɔm xsto xxl, nɔ gɛt brekpɔynt abrɛvieshɔn insay dɛn. Dis na bikɔs dɛn klas dɛn de de aplay frɔm min-width: 0;ɛn ɔp, ɛn so dɛn nɔ de tay dɛn bay wan midia kwɛstyɔn. Bɔt di ɔda brekpoint dɛn gɛt wan brekpoint abrevieshɔn.

As a so, dɛn gi di klas dɛn nem bay we dɛn yuz di fɔmat:

.d-{value}fɔxs
.d-{breakpoint}-{value}fɔ sm, md, lg, xl, ɛn xxl.

Usay valyu na wan pan:

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

Di displei valyu dɛn kin chenj bay we dɛn chenj di $displaysvɛriɔbul ɛn rikompayl di SCSS.

Di midia kwɛstyɔn dɛn kin afɛkt di skrin wit dɛn wit di brekpɔynt we dɛn gi ɔ big pas dat . Fɔ ɛgzampul, .d-lg-nonesɛt display: none;dɛn na lg, xl, ɛn xxlskrin dɛn.

Ɛgzampul dɛn

d-inlayn

<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-blɔk d-blɔk

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

Fɔ ayd di ɛlimɛnt dɛn

Fɔ mek yu ebul fɔ divɛlɔp di mobayl kwik kwik wan, yuz displei klas dɛn we de ansa fɔ sho ɛn ayd di ɛlimɛnt dɛn bay divays. Nɔ mek ɔl difrɛn vɛshɔn dɛn fɔ di sem sayt, bifo dat, ayd di tin dɛn we de ansa fɔ ɛni skrin saiz.

Fɔ ayd di ɛlimɛnt dɛn jɔs yuz di .d-noneklas ɔ wan pan di .d-{sm,md,lg,xl,xxl}-noneklas dɛn fɔ ɛni rispɔnsiv skrin chenj.

Fɔ sho wan ɛlimɛnt nɔmɔ pan wan givɛn intaval fɔ skrin saiz dɛn yu kin jɔyn wan .d-*-noneklas wit wan .d-*-*klas, fɔ ɛgzampul .d-none .d-md-block .d-xl-none .d-xxl-nonego ayd di ɛlimɛnt fɔ ɔl di skrin saiz dɛn pas pan midul ɛn big divays dɛn.

Skrin saiz	Klas
Ayd pan ɔlman	`.d-none`
Hidden onli pan xs	`.d-none .d-sm-block`
Hidden onli pan sm	`.d-sm-none .d-md-block`
Hidden onli na md	`.d-md-none .d-lg-block`
Hidden onli pan lg	`.d-lg-none .d-xl-block`
Na xl nɔmɔ dɛn ayd am	`.d-xl-none .d-xxl-block`
Na xxl nɔmɔ dɛn ayd am	`.d-xxl-none`
Wi kin si am pan ɔlman	`.d-block`
Na xs nɔmɔ yu kin si am	`.d-block .d-sm-none`
Visible onli na sm	`.d-none .d-sm-block .d-md-none`
Na md nɔmɔ yu kin si am	`.d-none .d-md-block .d-lg-none`
Visible onli pan lg	`.d-none .d-lg-block .d-xl-none`
Na xl nɔmɔ yu kin si am	`.d-none .d-xl-block .d-xxl-none`
Na xxl nɔmɔ yu kin si am	`.d-none .d-xxl-block`

hide on lg and wider screens

ayd pan skrin dɛn we smɔl pas 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>

Displei we dɛn de print

Chenj di displayvalyu fɔ di ɛlimɛnt dɛn we yu de print wit wi print displei yutiliti klas dɛn. Inklud sɔpɔt fɔ di sem displayvalyu dɛn we wi rispɔnsiv .d-*yutiliti dɛn gɛt.

.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

Dɛn kin jɔyn di print ɛn displei klas dɛn togɛda.

Skrin Nɔmɔ (Ayd we yu de print nɔmɔ)

Print Only (Hide on screen only)

Ayd te i big na di skrin, bɔt sho ɔltɛm we yu print

<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 we bin de

Yutiliti dɛn API

Displei yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn 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
    ),