Source

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 displaynafolo 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 xska se xl, 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 kan sm, md, lg, ani xl.

Yɔrɔ min na nafa ye dɔ ye:

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

kunnafonidilanw ɲininkaliw bɛ nɔ bila ekran bonya la ni kariyɔrɔ dilen ye walima min ka bon . Misali la, .d-lg-nonesetiw bɛ display: none;kɛ u fila bɛɛ kan lgani xlekranw kan.

Misaliw

d-inline ye
d-inline ye 
<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-blok ye d-blok ye 
<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ɔko suguya wɛrɛw dabɔli ma pewu, o nɔ na, ​​aw ka fɛn dɔ dogo cogo la min bɛ jaabi di ekran hakɛ kelen-kelen bɛɛ ma.

Walasa ka fɛnw dogo, i bɛ baara kɛ dɔrɔn ni .d-nonekalasi walima kalansen dɔ ye .d-{sm,md,lg,xl}-nonewalasa 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-*-noneni kalasi dɔ fara ɲɔgɔn kan .d-*-*, misali la .d-none .d-md-block .d-xl-nonea bɛna fɛn dɔ dogo ɛkran hakɛ bɛɛ la fo minɛn cɛmancɛw ni minɛnbaw kan.

Écran Taille 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
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
hide on screens wider than lg
dogo ekranw kan minnu ka dɔgɔ ni lg ye 
<div class="d-lg-none">hide on screens wider than lg</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 displayfɛ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ɔ displaynafa 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-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.

Écran Dɔrɔn (Hide on print only) .
Print Only (Hide on screen only)
I dogo fo ka se a bonya ma ɛkran kan, nka a jira tuma bɛɛ sɛbɛ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>