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 display
rawa 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 xs
te 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}
mosm
,md
,lg
,xl
mexxl
.
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 $displays
taurangi 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-none
he huinga display: none;
ki runga lg
, xl
, me xxl
nga mata.
Tauira
<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>
<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-none
karaehe, i tetahi o nga .d-{sm,md,lg,xl,xxl}-none
karaehe 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-*-none
karaehe me te .d-*-*
karaehe, hei tauira .d-none .d-md-block .d-xl-none .d-xxl-none
ka 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 |
<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 display
uara o nga huānga i te wa e ta ana me o maatau karaehe taputapu whakaatu. Kei roto ko te tautoko mo nga display
uara 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.
<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
),