Ipakita ti sanikua

Napartak ken makasungbat nga i-toggle ti display value dagiti paset ken dadduma pay babaen kadagiti display utilities-tayo. Iramanna ti suporta para kadagiti sumagmamano kadagiti ad-adu a gagangay a pateg, ken dagiti pay sumagmamano nga ekstra para iti panangtengngel ti pannakaiparang no agimprenta.

No kasano ti panagandar dayta

Baliwan ti pateg ti displaysanikua babaen dagiti responsive display utility classes mi. Igagarami a suportaran laeng ti maysa a subgrupo dagiti amin a mabalin a pateg para iti display. Mabalin a pagtitiponen dagiti klase para iti nadumaduma nga epekto kas kasapulam.

Notasion

Ipakita dagiti klase ti utilidad a maipakat kadagiti amin a breakpoint , manipud xsiti aginggana iti xl, ket awan ti pannakapaababa ti breakpoint kadagitoy. Daytoy ket gapu ta dagitoy a klase ket maipakat manipud min-width: 0;ken agpangato, ken iti kasta ket saan a naisinggalut babaen ti maysa a panagsaludsod ti media. Dagiti nabati a breakpoint, nupay kasta, ket talaga a mangiraman ti maysa nga ababa a breakpoint.

Kas kasta, dagiti klase ket nainaganan babaen ti panagusar ti pormat:

• .d-{value}paraxs
• .d-{breakpoint}-{value}para iti sm, md, lg, ken xl.

Saan a ti pateg ket maysa kadagiti:

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

Dagiti pateg ti display ket mabalin a mabaliwan babaen ti panagbalbaliw ti $displaysvariable ken panagtipon manen ti SCSS.

Dagiti panagsaludsod ti media ket mangapektar kadagiti kalawa ti iskrin nga addaan ti naited a breakpoint wenno dakdakkel . Kas pagarigan, ag- .d-lg-noneset display: none;iti agpada lgken xliskrin.

Dagiti pagarigan

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

Panangilemmeng kadagiti elemento

Para iti naparpartak a mobile-friendly a panagrang-ay, agusar kadagiti makasungbat a klase ti display para iti panangipakita ken panangilemmeng kadagiti elemento babaen ti alikamen. Liklikan ti panagpartuat kadagiti interamente a naiduma a bersion ti isu met laeng a site, imbes ketdi, ilemmeng dagiti elemento a makasungbat para iti tunggal maysa a kadakkel ti iskrin.

Tapno mailemmeng dagiti elemento usaren laeng ti .d-noneklase wenno maysa kadagiti .d-{sm,md,lg,xl}-noneklase para iti ania man a makasungbat a panagduduma ti iskrin.

Tapno maipakita ti maysa nga elemento laeng iti naited nga aggigiddan dagiti kadakkel ti iskrin mabalinmo a pagtitiponen ti maysa a .d-*-noneklase iti maysa a .d-*-*klase, kas pagarigan .d-none .d-md-block .d-xl-noneket ilemmengto ti elemento para kadagiti amin a kadakkel ti iskrin malaksid kadagiti kalalainganna ken dadakkel nga alikamen.

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

Ipakita iti naimaldit

Baliwan ti displaypateg dagiti elemento no agimaldit babaen dagiti klasetayo ti utilidad ti display ti panagimaldit. Iramanna ti suporta para kadagiti isu met laeng displaya pateg a kas kadagiti responsive .d-*utilities-tayo.

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

Mabalin a pagtitiponen dagiti klase ti panagimprenta ken panangiparang.

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