Ipakita ti sanikua

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 xxl, 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. Nupay kasta, dagiti nabati a breakpoint ket talaga a mangiraman ti pannakapaababa ti breakpoint.

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

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

Saan a ti pateg ket maysa kadagiti:

• none
• inline
• inline-block
• block
• grid
• 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 iti naited a breakpoint wenno dakdakkel . Kas pagarigan, i- .d-lg-noneset display: none;ti lg, xl, ken xxliskrin.

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,xxl}-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-none .d-xxl-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-grid
• .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>

Sass nga

API dagiti utilidad

Dagiti utilidad ti display ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti utilities 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
    ),