Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Gosipụta ihe onwunwe

Ngwa ngwa na anabataghachi uru ngosi nke components yana ihe ndị ọzọ site na iji ihe ngosi anyị. Gụnyere nkwado maka ụfọdụ ụkpụrụ a na-ahụkarị, yana ụfọdụ mgbakwunye maka njikwa ngosi mgbe a na-ebipụta akwụkwọ.

Ka o si arụ ọrụ

Gbanwee uru nke ụlọ displayahụ site na iji klaasị ihe ngosi na-anabata anyị. Anyị na-ama ụma na-akwado naanị nkeji nke ụkpụrụ niile enwere ike maka display. Enwere ike ijikọ klaasị maka mmetụta dị iche iche dịka ịchọrọ.

Nkọwapụta

Ngosipụta klaasị ịba uru na-emetụta ebe nkwụsịtụ niile , site xsna ruo xxl, enweghị mbelata nkwụsịtụ n'ime ha. Nke a bụ n'ihi na a na-etinye klaasị ndị ahụ site min-width: 0;na elu, yabụ na ajụjụ mgbasa ozi ejighị ya. Otú ọ dị, ebe nkwụsịtụ fọdụrụ na-agụnye mbiri nkebi nkwụsịtụ.

Dị ka nke a, a na-akpọ klaasị ahụ site na usoro:

  • .d-{value}makaxs
  • .d-{breakpoint}-{value}maka sm, md, lg, xlna xxl.

Ebe uru bụ otu n'ime:

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

Enwere ike ịgbanwe ụkpụrụ ngosi site n'ịgbanwe displayụkpụrụ akọwapụtara na $utilitiesiweghachi SCSS.

Ajụjụ mgbasa ozi na-emetụta obosara ihuenyo na ebe nkwụsịtụ enyere ma ọ bụ ka ukwuu . Dịka ọmụmaatụ, .d-lg-nonetọọ display: none;na lg, xl, na xxlihuenyo.

Ihe atụ

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

Ihe na-ezo ezo

Maka mmepe enyi na enyi mkpanaka ngwa ngwa, jiri klaasị ngosi na-anabata maka igosi na zobe ihe site na ngwaọrụ. Zere ịmepụta ụdịdị dị iche iche nke otu saịtị, kama zoo ihe ndị na-anabata nke ọma maka nha ihuenyo ọ bụla.

Iji zoo ihe naanị jiri .d-noneklas ma ọ bụ otu n'ime .d-{sm,md,lg,xl,xxl}-noneklaasị maka mgbanwe ihuenyo ọ bụla na-anabata.

Iji gosi ihe mmewere naanị na oge enyere nke nha ihuenyo ị nwere ike ijikọ otu .d-*-noneklas na .d-*-*klas, dịka ọmụmaatụ .d-none .d-md-block .d-xl-none .d-xxl-nonega-ezobe mmewere maka nha ihuenyo niile ma e wezụga na ngwaọrụ ọkara na nnukwu.

Ogo ihuenyo Klas
Zoro ezo na niile .d-none
Zoro ya naanị na xs .d-none .d-sm-block
Ezochiri naanị na sm .d-sm-none .d-md-block
Zoro ya naanị na md .d-md-none .d-lg-block
Ezochiri naanị na lg .d-lg-none .d-xl-block
Zoro ya naanị na xl .d-xl-none
Zoro ya naanị na xxl .d-xxl-none .d-xxl-block
Na-ahụ anya na niile .d-block
A na-ahụ anya naanị na xs .d-block .d-sm-none
A na-ahụ anya naanị na sm .d-none .d-sm-block .d-md-none
A na-ahụ anya naanị na md .d-none .d-md-block .d-lg-none
A na-ahụ anya naanị na lg .d-none .d-lg-block .d-xl-none
A na-ahụ anya naanị na xl .d-none .d-xl-block .d-xxl-none
A na-ahụ anya naanị na xxl .d-none .d-xxl-block
zoo na lg na ihuenyo sara mbara
zoo na ihuenyo pere mpe karịa lg
html
<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>

Gosipụta na mbipụta

Gbanwee displayuru nke ihe mgbe ị na-eji klaasị ihe ngosi ebipụta anyị na-ebipụta. Gụnyere nkwado maka otu displayụkpụrụ dị ka akụrụngwa anyị na-anabata .d-*.

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

Enwere ike ijikọ klaasị mbipụta na ngosipụta.

Naanị ihuenyo (Zo na ebipụta naanị)
Naanị Bipụta (Zo na ihuenyo naanị)
Zoo ruo nnukwu na ihuenyo, mana na-egosi mgbe niile na mbipụta
html
<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

Utilities API

Ekwuwapụtala ngwa ngosi n'ime ngwa API anyị na scss/_utilities.scss. Mụta otu esi eji ngwa 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
    ),