Source

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 panagsaludsod ti media ket mangyepekto kadagiti kalawa ti iskrin nga addaan iti naited a breakpoint wenno dakdakkel . Kas pagarigan, ag- .d-lg-noneset display: none;iti agpada lgken xliskrin.

Dagiti pagarigan

d-inline nga
d-inline nga
<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-blok nga d-blok nga
<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 ti 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.

Dakkel ti Iskrin Klase
Nailemmeng iti amin .d-none
Nailemmeng laeng iti xs .d-none .d-sm-block
Nailemmeng laeng iti sm .d-sm-none .d-md-block
Nailemmeng laeng iti md .d-md-none .d-lg-block
Nailemmeng laeng iti lg .d-lg-none .d-xl-block
Nailemmeng laeng iti xl .d-xl-none
Makita iti amin .d-block
Makita laeng iti xs .d-block .d-sm-none
Makita laeng iti sm .d-none .d-sm-block .d-md-none
Makita laeng iti md .d-none .d-md-block .d-lg-none
Makita laeng iti lg .d-none .d-lg-block .d-xl-none
Makita laeng iti xl .d-none .d-xl-block
hide on screens wider than lg
aglemmeng kadagiti iskrin a basbassit ngem 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>

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.

Iskrin Laeng (Ilemmeng laeng iti naimaldit) .
Print Only (Hide on screen only)
Ilemmeng agingga iti dakkel iti iskrin, ngem kanayon nga ipakita iti naimaldit
<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>