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.

I tenei wharangi

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 xxl, 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, xlme xxl.

Ko te uara tetahi o:

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

Ka taea te whakarereke i nga uara whakaatu ma te huri i te $displaystaurangi me te whakahiato i te SCSS.

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, .d-lg-nonehe huinga display: none;ki runga lg, xl, me xxlnga mata.

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 momo putanga rereke o te waahi kotahi, me huna nga huānga kia aro ki 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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Huna noa i runga i te xxl	`.d-xxl-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 .d-xxl-none`
Ka kitea i runga i te xxl anake	`.d-none .d-xxl-block`

hide on lg and wider screens

huna ki nga mata iti ake i te 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>

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

Sass

API taputapu

Ko nga taputapu whakaatu ka whakaatuhia i roto i o maatau taputapu API i roto i scss/_utilities.scss. Akohia me pehea te whakamahi i nga taputapu 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
    ),