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

Na ibe a

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 $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-nonetọọ display: none;na lg, xl, na xxlihuenyo.

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 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 .d-xxl-block`
Zoro ya naanị na xxl	`.d-xxl-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 .d-xxl-none`
A na-ahụ anya naanị na xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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

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>

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