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 display
mali 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 xs
hadi 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}
kwasm
,md
,lg
,xl
naxxl
.
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 $displays
kutofautisha na kurejesha SCSS.
Hoja za midia huathiri upana wa skrini na sehemu fulani ya kukatika au kubwa zaidi . Kwa mfano, .d-lg-none
huwasha , , na display: none;
skrini .lg
xl
xxl
Mifano
<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>
<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-none
darasa au moja ya .d-{sm,md,lg,xl,xxl}-none
darasa kwa utofauti wowote wa skrini unaojibu.
Ili kuonyesha kipengee kwa muda fulani wa saizi za skrini unaweza kuchanganya .d-*-none
darasa 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 |
<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 display
thamani ya vipengee unapochapisha na madarasa yetu ya matumizi ya uchapishaji. Inajumuisha usaidizi wa display
thamani 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.
<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
),