Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

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