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.

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 xl, 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. Vikwazo 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, na xl.

Ambapo thamani ni moja ya:

none
inline
inline-block
block
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-noneseti display: none;zote mbili lgna xlskrini.

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 sawa, 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}-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, 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`
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`

Ficha kwenye lg na skrini pana

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 wakati wa kuchapisha 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-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)

Chapisha Pekee (Ficha kwenye skrini pekee)

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>