in English

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.

Niini nga panid

Giunsa kini paglihok

Usba ang bili sa displaykabtangan gamit ang among responsive display utility classes. Kami gituyo nga nagsuporta sa usa lamang ka subset sa tanan nga posible nga mga 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 xssa hangtod xxl, wala’y pinamubo nga breakpoint. 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, xlug xxl.

Diin ang bili usa sa:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-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-nonegitakda display: none;sa lg, xl, ug xxlmga 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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Gitago lang sa xxl	`.d-xxl-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 .d-xxl-none`
Makita ra sa xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

itago sa mga screen nga mas gamay kay sa lg

<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 sa dihang mag-imprenta gamit ang among mga klase sa utility sa print 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-grid
.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>

Sass

Utilities API

Ang mga gamit sa pagpakita gideklarar sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga 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
    ),