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 xl, 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, lgna xl.

Ebe uru bụ otu n'ime:

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

Enwere ike ịgbanwe ụkpụrụ ngosi site n'ịgbanwe $displaysmgbanwe na iweghachi 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-nonesetịpụrụ display: none;na ma lgna xlihuenyo.

Ihe atụ

d-inline
d-inline 
<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-mgbochi d-mgbochi 
<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>

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}-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-nonega-ezobe mmewere maka nha ihuenyo niile ma e wezụga na ngwaọrụ ọkara na nnukwu.

Nha 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
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
zoo na lg na ihuenyo sara mbara
zoo na ihuenyo pere mpe karịa lg 
<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-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ị)
Bipụta naanị (Zo na ihuenyo naanị)
Zoo ruo nnukwu na ihuenyo, mana na-egosi mgbe niile na mbipụta 
<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>