Hōʻike waiwai

Hoʻololi wikiwiki a pane i ka waiwai hōʻike o nā ʻāpana a me nā mea hou aku me kā mākou mau pono hōʻike. Loaʻa i ke kākoʻo no kekahi o nā waiwai maʻamau, a me kekahi mau mea hou no ka hoʻomalu ʻana i ka hōʻike ke paʻi ʻana.

Ma kēia ʻaoʻao

Pehea e hana ai

E hoʻololi i ka waiwai o ka displaywaiwai me kā mākou mau papa hana hōʻike pane. Kākoʻo mākou i kahi ʻāpana o nā waiwai kūpono no display. Hiki ke hoʻohui ʻia nā papa no nā hopena like ʻole e like me kou makemake.

Notation

Hōʻike i nā papa hoʻohana e pili ana i nā wahi haʻihaʻi a pau , mai xsa hiki i xxl, ʻaʻohe wahi pōkole i loko o lākou. No ka mea ua hoʻohana ʻia kēlā mau papa mai min-width: 0;a i luna, a no laila ʻaʻole i hoʻopaʻa ʻia e kahi nīnau media. ʻO nā wahi haʻi i koe naʻe, loaʻa i kahi pōkole breakpoint.

No laila, ua kapa ʻia nā papa me ke ʻano:

.d-{value}no ka meaxs
.d-{breakpoint}-{value}no ka sm, md, lg, xla me xxl.

ʻO kahi waiwai kekahi o:

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

Hiki ke hoʻololi ʻia nā waiwai hōʻike ma ka hoʻololi ʻana i ka $displayshoʻololi a me ka hoʻopili hou ʻana i ka SCSS.

Hoʻopili nā nīnau media i ka laula o ka pale me ka wahi haʻi i hāʻawi ʻia a i ʻole ka nui . No ka laʻana, .d-lg-nonekau ʻia display: none;ma lg, xl, a me xxlnā pale.

Nā laʻana

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

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

Huna mea

No ka hoʻomohala ʻana i ka paʻa paʻa paʻa wikiwiki, e hoʻohana i nā papa hōʻike pane no ka hōʻike ʻana a me ka hūnā ʻana i nā mea e ka hāmeʻa. Hōʻalo i ka hana ʻana i nā mana like ʻole o ka paena hoʻokahi, ma kahi o ka hūnā ʻana i nā mea i pane ʻia no kēlā me kēia nui o ka pale.

No ka hūnā ʻana i nā mea e hoʻohana wale i ka .d-nonepapa a i ʻole kekahi o nā .d-{sm,md,lg,xl,xxl}-nonepapa no ka hoʻololi ʻana o ka pale pane.

No ka hōʻike ʻana i kahi mea wale nō ma kahi manawa i hāʻawi ʻia o ka nui o ka pale hiki iā ʻoe ke hoʻohui i hoʻokahi .d-*-nonepapa me kahi .d-*-*papa, no ka laʻana .d-none .d-md-block .d-xl-none .d-xxl-nonee hūnā i ka mea no nā nui pale a pau koe wale nō ma nā hāmeʻa waena a nui.

Nui pale	Papa
Huna i nā mea a pau	`.d-none`
Hunaia ma xs wale no	`.d-none .d-sm-block`
Huna wale ma sm	`.d-sm-none .d-md-block`
Huna wale ma md	`.d-md-none .d-lg-block`
Huna wale ma lg	`.d-lg-none .d-xl-block`
Huna wale ma xl	`.d-xl-none .d-xxl-block`
Huna ʻia ma xxl wale nō	`.d-xxl-none`
ʻIke ʻia ma nā mea a pau	`.d-block`
ʻIke ʻia ma xs wale nō	`.d-block .d-sm-none`
ʻIke ʻia ma ka sm	`.d-none .d-sm-block .d-md-none`
ʻIke wale ʻia ma md	`.d-none .d-md-block .d-lg-none`
ʻIke wale ʻia ma lg	`.d-none .d-lg-block .d-xl-none`
ʻIke ʻia ma xl wale nō	`.d-none .d-xl-block .d-xxl-none`
ʻIke ʻia ma xxl wale nō	`.d-none .d-xxl-block`

hide on lg and wider screens

peʻe ma nā pale liʻiliʻi ma mua o 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>

Hōʻike ma ka paʻi

E hoʻololi i ka displaywaiwai o nā mea i ka paʻi ʻana me kā mākou papa hana pono hōʻike paʻi. Hoʻokomo pū ʻia ke kākoʻo no nā displaywaiwai like me kā mākou mau .d-*pono hana pane.

.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

Hiki ke hoʻohui ʻia nā papa paʻi a hōʻike.

Pale wale nō (Hūnā ma ka paʻi wale nō)

Print Only (Hide on screen only)

Hūnā a hiki i ka nui ma ka pale, akā e hōʻike mau ma ka paʻi

<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

API no nā pono hana

Hōʻike ʻia nā pono hōʻike i kā mākou API ponoʻī ma scss/_utilities.scss. E aʻo pehea e hoʻohana ai i nā pono 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
    ),