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

<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 whakawhanaketanga hoa-rorohiko, whakamahia nga karaehe whakaatu urupare mo te whakaatu me te huna i nga huānga ma te taputapu. A ape i te hanga i nga putanga rereke katoa o te waahi kotahi, me huna nga huānga kia aro ki ia rahi o te 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>