Source

Whakaatu taonga

Ka huri tere me te whakautu i te uara whakaatu o nga waahanga me etahi atu mea me o maatau taputapu whakaatu. Kei roto ko te tautoko mo etahi o nga uara noa ake, me etahi taapiri mo te whakahaere whakaaturanga ina ta.

Pehea te mahi

Hurihia te uara o te displayrawa me o maatau karaehe whaipainga whakaatu urupare. Ka tautoko noa matou i tetahi waahanga o nga uara katoa ka taea mo display. Ka taea te whakakotahi i nga karaehe mo nga momo paanga ka hiahia koe.

Tohutohu

Whakaatuhia nga karaehe whaipainga e pa ana ki nga waahi wehenga katoa , mai i xste xl, kaore he whakapotonga waahi pakaru i roto. Ko tenei na te mea kua tonohia aua karaehe mai i min-width: 0;runga ake, na reira karekau e herea e te patai pāpāho. Heoi ano, kei roto i nga toenga wehenga he whakapototanga mokowhiti.

Na, ka whakaingoatia nga karaehe ma te whakatakotoranga:

  • .d-{value}moxs
  • .d-{breakpoint}-{value}mo sm, md, lg, me xl.

Ko te uara tetahi o:

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

Ko nga patai pāpāho ka pa ki te whanui o te mata me te waahi pakaru kua hoatu , nui ake ranei . Hei tauira, ko .d-lg-nonenga huinga display: none;i runga i nga mata lge xlrua.

Tauira

raina-d
raina-d
<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-poraka d-poraka
<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 huānga

Kia tere ake te whanaketanga hoa-rorohiko, whakamahia nga karaehe whakaatu urupare hei whakaatu me te huna i nga huānga ma te taputapu. A ape i te hanga i nga putanga rereke katoa o te pae kotahi, engari huna huānga aro mo ia rahi mata.

Hei huna i nga huānga me whakamahi noa i te .d-nonekaraehe, i tetahi o nga .d-{sm,md,lg,xl}-nonekaraehe ranei mo nga rereketanga o te mata aro.

Hei whakaatu i tetahi huānga anake i runga i te waahi o te rahi o te mata ka taea e koe te whakakotahi i tetahi .d-*-nonekaraehe me te .d-*-*karaehe, hei tauira .d-none .d-md-block .d-xl-noneka huna te huānga mo nga rahi mata katoa engari ki nga taputapu reo me te rahi.

Rahi Mata Karaehe
Huna ki te katoa .d-none
Huna ana ki te xs .d-none .d-sm-block
Huna noa i runga i te sm .d-sm-none .d-md-block
Huna noa ki runga md .d-md-none .d-lg-block
Huna ana ki lg .d-lg-none .d-xl-block
Huna ana ki te xl .d-xl-none
Ka kitea ki te katoa .d-block
Ka kitea i runga xs anake .d-block .d-sm-none
Ka kitea i runga i te sm .d-none .d-sm-block .d-md-none
Ka kitea anake i runga i te md .d-none .d-md-block .d-lg-none
Ka kitea i runga i te lg .d-none .d-lg-block .d-xl-none
Ka kitea i runga xl anake .d-none .d-xl-block
hide on screens wider than lg
huna ki nga mata iti ake i te 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>

Whakaatuhia ki te ta

Hurihia te displayuara o nga huānga i te wa e ta ana me o maatau karaehe taputapu whakaatu. Kei roto ko te tautoko mo nga displayuara rite ki a maatau .d-*taputapu urupare.

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

Ka taea te whakakotahi i nga karaehe tuhi me te whakaatu.

Mata Anake (Huna ki te ta anake)
Print Only (Hide on screen only)
Huna ki te rahi ki te mata, engari me whakaatu tonu ki te 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>