A jira ko nafolomafɛnw
Teliya la ani ka jaabi di, ka fɛnw jiracogo nafa sɛgɛsɛgɛ ani fɛn wɛrɛw ni an ka jiracogo nafamafɛnw ye. A bɛ dɛmɛ don nafa dɔw la minnu ka ca kosɛbɛ, ani farankan dɔw kan walasa ka jiracogo kɔlɔsi ni sɛbɛnni bɛ kɛ.
A bɛ baara kɛ cogo min na
Yɛlɛma don display
nafolo nafa la ni an ka jaabi jiracogo nafama kalanw ye. An bɛ dɛmɛ don ni laɲini ye ka nafaw bɛɛ lajɛlen dɔrɔn de dɛmɛ display
. Kalansow bɛ se ka fara ɲɔgɔn kan walasa ka nɔ suguya caman sɔrɔ i n’a fɔ aw mago bɛ cogo min na.
Kɔlɔsili
Display utility classes minnu bɛ tali kɛ breakpoints bɛɛ la , k’a ta xs
ka se xxl
, breakpoint surunyalen tɛ u kɔnɔ. O bɛ Kɛ k’a sababu Kɛ o kàlanw bɛ Kɛ ka Bɔ min-width: 0;
ka Taa san fɛ, wa o cogo la u tɛ siri ni kunnafonidilan ɲininkali ye. Nka, kari-yɔrɔ tɔw la, kari-yɔrɔ surunyalen dɔ bɛ yen.
O cogo la, kalansenw tɔgɔ bɛ Da ni nin cogoya ye:
.d-{value}
kosɔnxs
.d-{breakpoint}-{value}
ka da a kansm
,md
,lg
,xl
, anixxl
.
Yɔrɔ min na nafa ye dɔ ye:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Ɲɛjirali nafaw bɛ se ka Changé ni fɛn $displays
caman sɛgɛsɛgɛli ye ani ka SCSS lajɛ kokura.
kunnafonidilanw ɲininkaliw bɛ nɔ bila ɛkran bonya la ni kariyɔrɔ dilen ye walima ka tɛmɛ o kan . Misali la, a bɛ .d-lg-none
sigi , , ani ɛkranw kan.display: none;
lg
xl
xxl
Misaliw
<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>
Elemanw dogocogo
Walasa ka mobili-friendly yiriwali teliya, baara kɛ ni jaabi jiralanw ye walasa ka fɛnw jira ani ka u dogo minɛnw fɛ. Aw ye aw yɛrɛ tanga site kelen in bɔcogo wɛrɛw ma pewu, o nɔ na, aw ka fɛnw dogo ka kɛɲɛ ni jaabi ye ekran hakɛ kelen-kelen bɛɛ la.
Walasa ka fɛnw dogo, i bɛ baara kɛ dɔrɔn ni .d-none
kalasi walima kalansen dɔ ye .d-{sm,md,lg,xl,xxl}-none
walasa ka jaabi caman sɔrɔ ekran caman ɲɔgɔnna caman na.
Walasa ka fɛn dɔ jira dɔrɔn ɛkran hakɛw cɛmancɛ dilen dɔ kan i bɛ se ka kalasi kelen .d-*-none
ni kalasi dɔ fara ɲɔgɔn kan .d-*-*
, misali la .d-none .d-md-block .d-xl-none .d-xxl-none
a bɛna fɛn dɔ dogo ɛkran hakɛ bɛɛ la fo minɛn cɛmancɛw ni minɛnbaw kan.
Écran hakɛ | Kilasi |
---|---|
A dogolen bɛ bɛɛ kan | .d-none |
A dogolen bɛ xs dɔrɔn de kan | .d-none .d-sm-block |
A dogolen bɛ sm dɔrɔn de kan | .d-sm-none .d-md-block |
A dogolen bɛ dɔrɔn md kan | .d-md-none .d-lg-block |
A dogolen bɛ lg dɔrɔn de kan | .d-lg-none .d-xl-block |
A dogolen bɛ xl dɔrɔn de kan | .d-xl-none .d-xxl-block |
A dogolen bɛ xxl dɔrɔn de kan | .d-xxl-none |
A bɛ ye bɛɛ kan | .d-block |
A bɛ ye xs dɔrɔn de kan | .d-block .d-sm-none |
A bɛ ye dɔrɔn sm kan | .d-none .d-sm-block .d-md-none |
A bɛ ye dɔrɔn md kan | .d-none .d-md-block .d-lg-none |
A bɛ ye lg dɔrɔn de kan | .d-none .d-lg-block .d-xl-none |
A bɛ ye xl dɔrɔn de kan | .d-none .d-xl-block .d-xxl-none |
A bɛ ye xxl dɔrɔn de kan | .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>
A jira sɛbɛn kɔnɔ
Yɛlɛma don display
fɛnw nafa la ni i bɛ sɛbɛnni kɛ ni an ka sɛbɛnni jiracogo nafama kalanw ye. Dɛmɛ bɛ sɔrɔ display
nafa kelenw na i n’a fɔ an ka jaabi .d-*
nafamafɛnw.
.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
Sɛbɛnni ni jirali kalanw bɛ se ka fara ɲɔgɔn kan.
<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 ye
Nafamafɛnw API
Ɲɛjirali nafamafɛnw fɔra an ka nafamafɛnw API kɔnɔ san scss/_utilities.scss
. Aw ye baara kɛcogo dɔn ni utilities API ye.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),