Source

Ipakita ang kabtangan

Dali ug dali nga i-toggle ang gipakita nga kantidad sa mga sangkap ug daghan pa sa among mga gamit sa pagpakita. Naglakip sa suporta alang sa pipila sa mas komon nga mga bili, ingon man usab sa pipila ka mga ekstra alang sa pagkontrolar sa display sa dihang nag-imprinta.

Giunsa kini paglihok

Usba ang bili sa displaykabtangan gamit ang among responsive display utility classes. Gituyo namon nga suportahan ang usa ka subset sa tanan nga posible nga kantidad alang sa display. Ang mga klase mahimong kombinasyon alang sa lainlaing mga epekto kung kinahanglan nimo.

Notasyon

Ipakita ang mga klase sa utility nga magamit sa tanan nga mga breakpoint , gikan xshangtod sa xl, walay breakpoint abbreviation niini. Kini tungod kay kana nga mga klase gipadapat gikan min-width: 0;ug pataas, ug sa ingon dili gigapos sa usa ka pangutana sa media. Ang nahabilin nga mga breakpoint, bisan pa, naglakip sa usa ka breakpoint abbreviation.

Ingon niana, ang mga klase ginganlan gamit ang format:

.d-{value}kayxs
.d-{breakpoint}-{value}kay sm, md, lg, ug xl.

Diin ang bili usa sa:

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

Ang mga pangutana sa media nag-epekto sa gilapdon sa screen nga adunay gihatag nga breakpoint o mas dako . Pananglitan, .d-lg-noneang mga set display: none;sa duha lgug xlmga screen.

Mga pananglitan

d-inline

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

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

Pagtago sa mga elemento

Para sa mas paspas nga mobile-friendly nga kalamboan, gamita ang responsive nga mga klase sa display para sa pagpakita ug pagtago sa mga elemento pinaagi sa device. Likayi ang paghimo og hingpit nga lainlain nga mga bersyon sa parehas nga site, imbes itago ang mga elemento nga tubagon alang sa matag gidak-on sa screen.

Aron itago ang mga elemento gamita lang ang .d-noneklase o usa sa mga .d-{sm,md,lg,xl}-noneklase para sa bisan unsang responsive screen variation.

Aron ipakita ang usa ka elemento sa usa ka gihatag nga agwat sa mga gidak-on sa screen mahimo nimong ikombinar ang usa ka .d-*-noneklase sa usa ka .d-*-*klase, pananglitan .d-none .d-md-block .d-xl-noneitago ang elemento alang sa tanan nga gidak-on sa screen gawas sa medium ug dagkong mga aparato.

Gidak-on sa Screen	Klase
Gitago sa tanan	`.d-none`
Gitago lang sa xs	`.d-none .d-sm-block`
Gitago lang sa sm	`.d-sm-none .d-md-block`
Gitago lang sa md	`.d-md-none .d-lg-block`
Gitago lang sa lg	`.d-lg-none .d-xl-block`
Gitago lang sa xl	`.d-xl-none`
Makita sa tanan	`.d-block`
Makita ra sa xs	`.d-block .d-sm-none`
Makita ra sa sm	`.d-none .d-sm-block .d-md-none`
Makita ra sa md	`.d-none .d-md-block .d-lg-none`
Makita ra sa lg	`.d-none .d-lg-block .d-xl-none`
Makita ra sa xl	`.d-none .d-xl-block`

hide on screens wider than lg

itago sa mga screen nga mas gamay kay sa 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 sa print

Usba ang displaybili sa mga elemento kon mag-imprenta gamit ang among mga klase sa gamit sa pag-imprinta nga display. Naglakip sa suporta alang sa parehas displaynga mga kantidad sama sa among mga responsive .d-*utilities.

.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

Ang mga klase sa pag-imprenta ug pagpakita mahimong mahiusa.

Screen Only (Itago sa print lang)

Print Only (Hide on screen only)

Pagtago hangtod sa dako sa screen, apan kanunay ipakita sa print

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