A jira ko nafolomafɛnw

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

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 displaynafaw caman cili ye minnu ɲɛfɔlen don $utilitiesSCSS kɔnɔ ani ka u 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-nonesigi , , ani ɛkranw kan.display: none;lgxlxxl

Misaliw

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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 ka baara kɛ dɔrɔn ni .d-nonekalasi walima kalansen dɔ ye .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-nonea bɛna fɛn dɔ dogo ɛkran hakɛ bɛɛ la fo minɛn cɛmancɛw ni minɛnbaw kan.

<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 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-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
    ),