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 display
prɔ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 xs
to 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
, ɛnxxl
.
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 $displays
vɛ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-none
sɛt display: none;
dɛn na lg
, xl
, ɛn xxl
skrin dɛn.
Ɛgzampul dɛn
<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>
<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-none
klas ɔ wan pan di .d-{sm,md,lg,xl,xxl}-none
klas 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-*-none
klas wit wan .d-*-*
klas, fɔ ɛgzampul .d-none .d-md-block .d-xl-none .d-xxl-none
go 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 |
<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 display
valyu 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 display
valyu 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.
<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
),