Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

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.

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}xs
  • .d-{breakpoint}-{value}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 displayvalyu dɛn we dɛn dɔn difayn insay $utilitiesɛ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 ɔ we 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
d-inlayn
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-blɔk d-blɔk
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
Na xxl nɔmɔ dɛn ayd am .d-xxl-none .d-xxl-block
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
ayd pan lg ɛn wida skrin dɛn
ayd pan skrin dɛn we smɔl pas lg
html
<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 (Ayd na di skrin nɔmɔ)
Ayd te i big na di skrin, bɔt sho ɔltɛm we yu print
html
<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 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
    ),