in English

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.

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 xl, ʻ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 mea sm, md, lg, a xl.

ʻO kahi waiwai kekahi o:

  • none
  • inline
  • inline-block
  • block
  • 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-nonehoʻonohonoho display: none;i nā mea ʻelua lga me xlnā pale.

Nā laʻana

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-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}-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-nonee hūnā i ka mea no nā nui pale a pau koe wale nō ma nā hāmeʻa waena a nui.

Ka nui o ka 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
ʻ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
peʻe ma nā pale lg a ākea
huna 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-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ūna ma ka paʻi wale nō)
Paʻi wale nō (Huna ma ka pale wale nō)
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>