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.

Nan paj sa a

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

Egzanp yo

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,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 .d-xxl-block`
Kache sèlman sou xxl	`.d-xxl-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 .d-xxl-none`
Vizib sèlman sou xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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 lè 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)

Print Only (Hide on screen only)

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>

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