Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Nuna dukiya

Da sauri da amsawa jujjuya darajar nunin abubuwan haɗin gwiwa da ƙari tare da kayan aikin nuninmu. Ya haɗa da goyan baya ga wasu mafi yawan dabi'u na gama gari, da kuma wasu ƙari don sarrafa nuni lokacin bugawa.

Yadda yake aiki

Canza darajar displaykadarorin tare da azuzuwan nunin mai amfani. Da gangan muke goyan bayan juzu'in duk abubuwan da ke yiwuwa don display. Ana iya haɗa azuzuwan don tasiri daban-daban kamar yadda kuke buƙata.

Sanarwa

Nuna azuzuwan masu amfani waɗanda suka shafi duk wuraren karyawa , daga xszuwa xxl, ba su da taƙaitaccen bayani a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0;sama da sama, don haka ba su da alaƙa da tambayar kafofin watsa labarai. Ragowar wuraren karya, duk da haka, sun haɗa da gajarta wurin hutu.

Don haka, ana kiran azuzuwan ta hanyar amfani da tsari:

  • .d-{value}dominxs
  • .d-{breakpoint}-{value}don sm, md, lg, xlda xxl.

Inda kimar ɗaya ce daga:

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

Ana iya canza ƙimar nuni ta canza displayƙimar da aka ayyana a ciki $utilitiesda sake tattara SCSS.

Tambayoyin kafofin watsa labarai suna shafar faɗin allo tare da wurin da aka bayar ko mafi girma . Misali, .d-lg-nonesaita display: none;kan lg, xl, da xxlallo.

Misalai

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-tabo d-tabo
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>

Boye abubuwa

Don saurin haɓaka abokantaka na wayar hannu, yi amfani da azuzuwan nuni don nunawa da ɓoye abubuwa ta na'ura. Guji ƙirƙirar nau'ikan rukunin yanar gizon iri ɗaya gaba ɗaya, a maimakon haka ɓoye abubuwa da amsa ga kowane girman allo.

Don ɓoye abubuwa kawai amfani da .d-noneajin ko ɗaya daga cikin .d-{sm,md,lg,xl,xxl}-noneazuzuwan don kowane bambancin allo mai amsawa.

Don nuna wani kashi kawai akan tazarar da aka bayar na girman allo zaku iya haɗa .d-*-noneaji ɗaya tare da .d-*-*aji, alal misali .d-none .d-md-block .d-xl-none .d-xxl-nonezai ɓoye nau'in don duk girman allo banda kan matsakaita da manyan na'urori.

Girman allo Class
Boye akan duka .d-none
Boye kawai akan xs .d-none .d-sm-block
Boye kawai akan sm .d-sm-none .d-md-block
Boye kawai akan md .d-md-none .d-lg-block
Boye kawai akan lg .d-lg-none .d-xl-block
Boye kawai akan xl .d-xl-none
Boye kawai akan xxl .d-xxl-none .d-xxl-block
Ganuwa akan duka .d-block
Ana iya gani akan xs kawai .d-block .d-sm-none
Ganuwa kawai akan sm .d-none .d-sm-block .d-md-none
Ana iya gani kawai akan md .d-none .d-md-block .d-lg-none
Ana iya gani kawai akan lg .d-none .d-lg-block .d-xl-none
Ana iya gani akan xl .d-none .d-xl-block .d-xxl-none
Ana iya gani akan xxl kawai .d-none .d-xxl-block
boye a kan lg da faffadan allo
boye a kan allo karami fiye da 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>

Nuna a cikin bugawa

Canja displayƙimar abubuwa lokacin bugawa tare da azuzuwan nunin bugun mu. Ya haɗa da goyan baya don ƙima iri ɗaya displayda abubuwan amfaninmu masu amsawa .d-*.

  • .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

Za a iya haɗa azuzuwan bugawa da nuni.

Allon Kawai (Boye akan bugawa kawai)
Buga Kawai (Boye akan allo kawai)
Ɓoye har zuwa babba akan allo, amma koyaushe yana nunawa akan bugawa
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 ɗin Utilities

Ana bayyana abubuwan amfani a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

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