Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

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 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 fɛn $displayscaman 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-nonesigi , , ani ɛkranw kan.display: none;lgxlxxl

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ɔ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-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.

É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
hide on lg and wider screens
dogo ekranw kan minnu ka dɔgɔ ni lg ye
<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.

É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>

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