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ọ display
ahụ 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 xs
na 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}
makasm
,md
,lg
,xl
naxxl
.
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 $displays
mgbanwe 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-none
tọọ display: none;
na lg
, xl
, na xxl
ihuenyo.
Ihe atụ
<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>
<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-none
klas ma ọ bụ otu n'ime .d-{sm,md,lg,xl,xxl}-none
klaasị maka mgbanwe ihuenyo ọ bụla na-anabata.
Iji gosi ihe mmewere naanị na oge enyere nke nha ihuenyo ị nwere ike ijikọ otu .d-*-none
klas na .d-*-*
klas, dịka ọmụmaatụ .d-none .d-md-block .d-xl-none .d-xxl-none
ga-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 |
<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 display
uru 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.
<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
),