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 xl, 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, ak xl.

Ki kote valè se youn nan:

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

Valè ekspozisyon yo ka chanje lè w chanje $displaysvaryab la ak 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 tou de lgak xlekran.

Egzanp yo

d-inline
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-blòk d-blòk 
<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>

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}-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-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
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
kache sou ekran lg ak pi laj
kache sou ekran ki pi piti pase 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>

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