Source

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

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

<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 mmewere 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`

hide on screens wider than lg

zoo na ihuenyo pere mpe karịa lg

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

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

Print Only (Hide on screen only)

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>