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 xl, 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, ɛn xl.

Usay valyu na wan pan:

  • none
  • inline
  • inline-block
  • block
  • 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 ɔl tu lgɛn di xlskrin dɛn.

Ɛgzampul dɛn

d-inlayn
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}-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-nonego ayd di ɛlimɛnt fɔ ɔl di skrin saiz dɛn pas pan midul ɛn big divays dɛn.

Skrin Sayz 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
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
ayd pan lg ɛn wida skrin dɛn
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-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 
<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>