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.
Canza darajar display
kadarorin 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.
Nuna azuzuwan masu amfani waɗanda suka shafi duk wuraren karyawa , daga xs
zuwa xl
, 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}
donsm
,md
,lg
daxl
.
Inda kimar ɗaya ce daga:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Tambayoyin kafofin watsa labarai suna tasiri nisan allo tare da wurin da aka bayar ko mafi girma . Misali, .d-lg-none
saiti display: none;
akan duka biyu lg
da xl
allo.
<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>
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, maimakon ɓoye ɓoyayyiyar amsa ga kowane girman allo.
Don ɓoye abubuwa kawai amfani da .d-none
ajin ko ɗaya daga cikin .d-{sm,md,lg,xl}-none
azuzuwan don kowane bambancin allo mai amsawa.
Don nuna wani kashi kawai akan tazarar da aka bayar na girman allo zaku iya haɗa .d-*-none
aji ɗaya tare da .d-*-*
aji, alal misali .d-none .d-md-block .d-xl-none
zai ɓ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 |
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 |
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Canja display
ƙimar abubuwa lokacin bugawa tare da azuzuwan nunin bugun mu. Ya haɗa da goyan baya don ƙima iri ɗaya display
da abubuwan amfaninmu masu amsawa .d-*
.
.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
Za a iya haɗa azuzuwan bugawa da nuni.
<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>