Onyesha mali

Geuza kwa haraka na kwa uwajibikaji thamani ya onyesho la vijenzi na zaidi ukitumia huduma zetu za kuonyesha. Inajumuisha usaidizi kwa baadhi ya thamani zinazojulikana zaidi, pamoja na baadhi ya ziada za kudhibiti onyesho wakati wa uchapishaji.

Katika ukurasa huu

Inavyofanya kazi

Badilisha thamani ya displaymali na madarasa yetu ya matumizi ya onyesho sikivu. Tunaauni kimakusudi kikundi kidogo tu cha thamani zote zinazowezekana za display. Madarasa yanaweza kuunganishwa kwa athari mbalimbali kama unahitaji.

Nukuu

Onyesha madarasa ya matumizi ambayo yanatumika kwa sehemu zote za kuvunja , kuanzia xshadi xxl, hayana ufupisho wa sehemu ya kuvunja ndani yake. Hii ni kwa sababu madarasa hayo yanatumika kutoka min-width: 0;na juu, na kwa hivyo hayafungwi na hoja ya midia. Vizuizi vilivyosalia, hata hivyo, vinajumuisha muhtasari wa sehemu ya kuvunja.

Kwa hivyo, madarasa yanaitwa kwa kutumia fomati:

.d-{value}kwaxs
.d-{breakpoint}-{value}kwa sm, md, lg, xlna xxl.

Ambapo thamani ni moja ya:

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

Thamani za kuonyesha zinaweza kubadilishwa kwa kubadilisha $displayskutofautisha na kurejesha SCSS.

Hoja za midia huathiri upana wa skrini na sehemu fulani ya kukatika au kubwa zaidi . Kwa mfano, .d-lg-nonehuwasha , , na display: none;skrini .lgxlxxl

Mifano

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>

Kuficha vipengele

Kwa maendeleo ya haraka ya kutumia simu ya mkononi, tumia madarasa ya kuonyesha yanayoitikia kwa kuonyesha na kuficha vipengele kwa kifaa. Epuka kuunda matoleo tofauti kabisa ya tovuti moja, badala yake ficha vipengele kwa kuwajibika kwa kila ukubwa wa skrini.

Ili kuficha vipengee tumia tu .d-nonedarasa au moja ya .d-{sm,md,lg,xl,xxl}-nonedarasa kwa utofauti wowote wa skrini unaojibu.

Ili kuonyesha kipengee kwa muda fulani wa saizi za skrini unaweza kuchanganya .d-*-nonedarasa moja na .d-*-*darasa, kwa mfano .d-none .d-md-block .d-xl-none .d-xxl-none, utaficha kipengele kwa ukubwa wote wa skrini isipokuwa kwenye vifaa vya kati na vikubwa.

Ukubwa wa skrini	Darasa
Imefichwa kwa wote	`.d-none`
Imefichwa kwenye xs pekee	`.d-none .d-sm-block`
Imefichwa kwenye sm pekee	`.d-sm-none .d-md-block`
Imefichwa kwa md	`.d-md-none .d-lg-block`
Imefichwa kwenye lg	`.d-lg-none .d-xl-block`
Imefichwa kwenye xl pekee	`.d-xl-none .d-xxl-block`
Imefichwa kwenye xxl pekee	`.d-xxl-none`
Inaonekana kwa wote	`.d-block`
Inaonekana kwenye xs pekee	`.d-block .d-sm-none`
Inaonekana kwenye sm pekee	`.d-none .d-sm-block .d-md-none`
Inaonekana kwenye md pekee	`.d-none .d-md-block .d-lg-none`
Inaonekana kwenye lg pekee	`.d-none .d-lg-block .d-xl-none`
Inaonekana kwenye xl pekee	`.d-none .d-xl-block .d-xxl-none`
Inaonekana kwenye xxl pekee	`.d-none .d-xxl-block`

hide on lg and wider screens

Ficha kwenye skrini ndogo kuliko 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>

Onyesha kwa kuchapishwa

Badilisha displaythamani ya vipengee unapochapisha na madarasa yetu ya matumizi ya uchapishaji. Inajumuisha usaidizi wa displaythamani sawa na huduma zetu .d-*zinazojibu.

.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

Madarasa ya kuchapisha na kuonyesha yanaweza kuunganishwa.

Skrini Pekee (Ficha kwa kuchapishwa pekee)

Print Only (Hide on screen only)

Ficha hadi kubwa kwenye skrini, lakini onyesha kwenye uchapishaji kila wakati

<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

API ya Huduma

Huduma za kuonyesha zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss. Jifunze jinsi ya kutumia API ya huduma.

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