Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

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 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 displaymaadili yaliyofafanuliwa $utilitiesna 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
d-inline
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-block d-block
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
Imefichwa kwenye xxl pekee .d-xxl-none .d-xxl-block
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
Ficha kwenye lg na skrini pana
Ficha kwenye skrini ndogo kuliko lg
html
<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)
Chapisha Pekee (Ficha kwenye skrini pekee)
Ficha hadi kubwa kwenye skrini, lakini onyesha kwenye uchapishaji kila wakati
html
<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
    ),