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}kaysm,md,lg, ugxl.
Diin ang bili usa sa:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Ang mga kantidad sa pagpakita mahimong mabag-o pinaagi sa pagbag-o sa $displaysvariable ug pag-recompile sa SCSS.
Ang mga pangutana sa media makaapekto 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
<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>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 |
<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 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.
<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>