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.

A wannan shafi

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 a ɗaure su 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 $displayscanji da sake haɗa 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

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

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

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 .d-xxl-block`
Boye kawai akan xxl	`.d-xxl-none`
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`

hide on lg and wider screens

boye a kan allo karami fiye da 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>

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)

Print Only (Hide on screen only)

Ɓoye har zuwa babba akan allo, amma koyaushe yana nunawa akan bugawa

<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
    ),