Ipropathi yokubonisa
Ngokukhawuleza nangokuphendula tshintsha ixabiso lokubonisa lamalungu kunye nokuninzi ngezixhobo zethu zokubonisa. Iquka inkxaso kwamanye amaxabiso aqhelekileyo, kunye nezinye ezongezelelweyo zokulawula umboniso xa ushicilela.
Ingaba isebenza kanjani
Guqula ixabiso display
lepropathi ngeeklasi zethu zoncedo oluphendulayo. Sixhasa ngenjongo kuphela iseti esezantsi yawo onke amaxabiso anokubakho e display
. Iiklasi zinokudityaniswa kwiziphumo ezahlukeneyo njengoko ufuna.
Ukuphawula
Bonisa iiklasi eziluncedo ezisebenza kuzo zonke iindawo zoqhawulo , ukusuka xs
ukuya xl
, azinazifinyezo zebreakpoint kuzo. Oku kungenxa yokuba ezo klasi zisetyenziswa ukusuka min-width: 0;
nangaphezulu, kwaye ke azibotshwanga ngumbuzo wemidiya. Ii-breakpoints ezishiyekileyo, nangona kunjalo, zibandakanya isifinyezo se-breakpoint.
Ngaloo ndlela, iiklasi zithiywa ngokusetyenziswa kwefomathi:
.d-{value}
ngenxaxs
.d-{breakpoint}-{value}
kubasm
,md
,lg
kunyexl
.
Apho ixabiso liyenye ye:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Amaxabiso omboniso angatshintshwa ngokutshintsha $displays
okuguquguqukayo kunye nokubuyisela kwakhona i-SCSS.
Imibuzo yemidiya ichaphazela ububanzi besikrini kunye nendawo enikiweyo yoqhawulo okanye enkulu . Umzekelo, .d-lg-none
iiseti display: none;
kuzo zombini lg
kunye xl
nezikrini.
Imizekelo
<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>
Ukufihla izinto
Kuphuhliso olukhawulezayo olusebenziseka lula, sebenzisa iiklasi zokubonisa eziphendulayo zokubonisa kunye nokufihla izinto ngesixhobo. Kuphephe ukwenza iinguqulelo ezahlukeneyo ngokupheleleyo kwindawo enye, endaweni yoko ufihle izinto ngokuphendula kwisayizi nganye yesikrini.
Ukufihla izinto ngokulula sebenzisa .d-none
iklasi okanye enye .d-{sm,md,lg,xl}-none
yeeklasi kulo naluphi na utshintsho oluphendulayo lwesikrini.
Ukubonisa into kuphela kwithuba elinikiweyo lobungakanani besikrini ungadibanisa iklasi enye .d-*-none
kunye .d-*-*
neklasi, umzekelo .d-none .d-md-block .d-xl-none
iyakufihla ielementi yazo zonke iisayizi zesikrini ngaphandle kwezixhobo eziphakathi nezinkulu.
Ubungakanani beSkrini | Iklasi |
---|---|
Ifihliwe kubo bonke | .d-none |
Ifihliwe kuphela kwi-xs | .d-none .d-sm-block |
Ifihliwe kuphela kwi-sm | .d-sm-none .d-md-block |
Ifihliwe kuphela kwi-md | .d-md-none .d-lg-block |
Ifihliwe kuphela kwi-lg | .d-lg-none .d-xl-block |
Ifihlwe kuphela kwi-xl | .d-xl-none |
Ibonakala kubo bonke | .d-block |
Ibonakala kuphela kwi-xs | .d-block .d-sm-none |
Ibonakala kuphela kwi-sm | .d-none .d-sm-block .d-md-none |
Ibonakala kuphela kwi-md | .d-none .d-md-block .d-lg-none |
Ibonakala kuphela kwi-lg | .d-none .d-lg-block .d-xl-none |
Ibonakala kuphela kwi-xl | .d-none .d-xl-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>
Bonisa ngoshicilelo
Guqula display
ixabiso lezinto xa ushicilela ngeeklasi eziluncedo zoshicilelo. Kubandakanya inkxaso display
yexabiso elifanayo nezixhobo zethu eziphendulayo .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
Iiklasi zokuprinta kunye nomboniso zinokudityaniswa.
<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>