Source

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 displaylepropathi 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 xsukuya 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}kuba sm, md, lgkunye xl.

Apho ixabiso liyenye ye:

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

Imithombo yeendaba ibuza isiphumo sobubanzi besikrini kunye nendawo enikiweyo yoqhawulo okanye enkulu . Umzekelo, .d-lg-noneiiseti display: none;kuzo zombini lgkunye xlnezikrini.

Imizekelo

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

<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 into ngokuphendula kwisayizi nganye yesikrini.

Ukufihla izinto ngokulula sebenzisa .d-noneiklasi okanye enye .d-{sm,md,lg,xl}-noneyeeklasi kulo naluphi na utshintsho oluphendulayo lwesikrini.

Ukubonisa into kuphela kwithuba elinikiweyo lobungakanani besikrini ungadibanisa iklasi enye .d-*-nonekunye .d-*-*neklasi, umzekelo .d-none .d-md-block .d-xl-noneiyakufihla 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`

hide on screens wider than lg

zifihle kwizikrini ezincinci kunelg

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

Bonisa ngoshicilelo

Guqula displayixabiso lezinto xa ushicilela ngeeklasi eziluncedo zoshicilelo. Kubandakanya inkxaso displayyexabiso 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.

Isikrini Kuphela (Fihla kushicilelo kuphela)

Print Only (Hide on screen only)

Fihla ukuya kuthi ga kwiscreen, kodwa hlala ubonisa kwiprinta

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