Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Montre pwopriyete

Byen vit ak repons aktive valè ekspozisyon eleman yo ak plis ankò ak sèvis piblik ekspozisyon nou yo. Gen ladann sipò pou kèk nan valè yo ki pi komen, osi byen ke kèk siplemantè pou kontwole ekspozisyon lè enprime.

Ki jan li fonksyone

Chanje valè displaypwopriyete a ak klas itilite ekspozisyon sansib nou yo. Nou fè espre sipòte sèlman yon ti gwoup tout valè posib pou display. Klas yo ka konbine pou plizyè efè jan ou bezwen.

Notasyon

Montre klas sèvis piblik ki aplike nan tout pwen rupture , soti nan xsrive xxl, pa gen okenn abrevyasyon pwen rupture ladan yo. Sa a se paske klas sa yo aplike soti nan min-width: 0;ak moute, epi konsa yo pa mare pa yon rechèch medya. Rès pwen yo, sepandan, gen ladan yon abrevyasyon breakpoint.

Kòm sa yo, klas yo yo nonmen lè l sèvi avèk fòma a:

  • .d-{value}pouxs
  • .d-{breakpoint}-{value}pou sm, md, lg, xl, ak xxl.

Ki kote valè se youn nan:

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

Valè ekspozisyon yo ka chanje lè yo chanje displayvalè yo defini nan $utilitiesak rekonpile SCSS la.

Rekèt medya yo afekte lajè ekran ak pwen rupture yo bay la oswa pi gwo . Pou egzanp, .d-lg-nonemete display: none;sou lg, xl, ak xxlekran.

Egzanp yo

d-inline
d-inline
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-blòk d-blòk
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Kache eleman yo

Pou yon devlopman ki pi rapid zanmitay mobil, sèvi ak klas ekspozisyon ki reponn pou montre ak kache eleman pa aparèy. Evite kreye vèsyon totalman diferan nan menm sit la, olye pou kache eleman pou chak gwosè ekran.

Pou kache eleman tou senpleman itilize .d-noneklas la oswa youn nan .d-{sm,md,lg,xl,xxl}-noneklas yo pou nenpòt varyasyon ekran reponn.

Pou montre yon eleman sèlman sou yon entèval bay gwosè ekran ou ka konbine yon .d-*-noneklas ak yon .d-*-*klas, pou egzanp .d-none .d-md-block .d-xl-none .d-xxl-nonepral kache eleman nan pou tout gwosè ekran eksepte sou aparèy mwayen ak gwo.

Gwosè ekran Klas
Kache sou tout .d-none
Kache sèlman sou xs .d-none .d-sm-block
Kache sèlman sou sm .d-sm-none .d-md-block
Kache sèlman sou md .d-md-none .d-lg-block
Kache sèlman sou lg .d-lg-none .d-xl-block
Kache sèlman sou xl .d-xl-none
Kache sèlman sou xxl .d-xxl-none .d-xxl-block
Vizib sou tout .d-block
Vizib sèlman sou xs .d-block .d-sm-none
Vizib sèlman sou sm .d-none .d-sm-block .d-md-none
Vizib sèlman sou md .d-none .d-md-block .d-lg-none
Vizib sèlman sou lg .d-none .d-lg-block .d-xl-none
Vizib sèlman sou xl .d-none .d-xl-block .d-xxl-none
Vizib sèlman sou xxl .d-none .d-xxl-block
kache sou ekran lg ak pi laj
kache sou ekran ki pi piti pase lg
html
<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>

Montre nan enprime

Chanje displayvalè eleman yo lè w ap enprime ak klas itilite ekspozisyon enprime nou yo. Gen ladann sipò pou menm displayvalè ak .d-*sèvis piblik reponn nou yo.

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

Klas enprime ak ekspozisyon yo ka konbine.

Ekran sèlman (Kache sou enprime sèlman)
Enprime sèlman (Kache sou ekran sèlman)
Kache jiska gwo sou ekran, men toujou montre sou enprime
html
<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

Itilite API

Ekspozisyon sèvis piblik yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),