Source

Bonisa impahla

Shintsha ngokushesha nangokuphendula inani lokubonisa lezingxenye nokunye okwengeziwe ngezinsiza zethu zokubonisa. Kufaka phakathi ukusekelwa kwamanye amanani avame kakhulu, kanye nokunye okungeziwe kokulawula isibonisi lapho uphrinta.

Isebenza kanjani

Shintsha inani displaylesakhiwo ngamakilasi ethu asebenzayo wokubonisa. Sisekela ngamabomu isethi engaphansi yawo wonke amanani angaba khona display. Amakilasi angahlanganiswa ngemiphumela ehlukahlukene njengoba udinga.

Isaziso

Bonisa amakilasi ensiza asebenza kuwo wonke ama- breakpoint , ukusuka xsku- xl, awanawo isifinyezo se-breakpoint kuwo. Lokhu kungenxa yokuthi lawo makilasi asetshenziswa ukusuka min-width: 0;naphezulu, futhi ngaleyo ndlela awaboshiwe umbuzo wemidiya. Ama-breakpoint asele, nokho, afaka isifinyezo se-breakpoint.

Kanjalo, amakilasi aqanjwa kusetshenziswa ifomethi:

.d-{value}okwexs
.d-{breakpoint}-{value}ngoba sm, md, lg, kanye xl.

Lapho inani lingenye ye:

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

Imibuzo yemidiya ithinta ububanzi besikrini nge-breakpoint enikeziwe noma enkulu . Isibonelo, .d-lg-noneamasethi display: none;kukho kokubili lgnezikrini xl.

Izibonelo

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

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

Ukuze uthole intuthuko esheshayo yeselula, sebenzisa amakilasi wokubonisa asabelayo ukuze ubonise futhi ufihle izinto ngedivayisi. Gwema ukudala izinguqulo ezihluke ngokuphelele zesayithi elifanayo, esikhundleni salokho fihla isici ngokusabela kusayizi wesikrini ngamunye.

Ukuze ufihle ama-elementi vele usebenzise .d-noneikilasi noma elinye .d-{sm,md,lg,xl}-nonelamakilasi kunoma yikuphi ukuhlukahluka kwesikrini esisabelayo.

Ukuze ubonise into ethile kuphela ngesikhawu esinikeziwe sosayizi besikrini ungahlanganisa isigaba esisodwa .d-*-nonenekilasi .d-*-*, isibonelo .d-none .d-md-block .d-xl-nonesizofihla isici sabo bonke osayizi besikrini ngaphandle kwamadivayisi aphakathi nendawo namakhulu.

Usayizi Wesikrini	Ikilasi
Kufihliwe kukho konke	`.d-none`
Kufihlwe kuphela ku-xs	`.d-none .d-sm-block`
Kufihlwe kuphela ku-sm	`.d-sm-none .d-md-block`
Kufihliwe kuphela ku-md	`.d-md-none .d-lg-block`
Kufihlwe kuphela ku-lg	`.d-lg-none .d-xl-block`
Kufihlwe kuphela ku-xl	`.d-xl-none`
Kubonakala kubo bonke	`.d-block`
Kubonakala ku-xs kuphela	`.d-block .d-sm-none`
Kubonakala ku-sm kuphela	`.d-none .d-sm-block .d-md-none`
Kubonakala kuphela ku-md	`.d-none .d-md-block .d-lg-none`
Kubonakala kuphela ku-lg	`.d-none .d-lg-block .d-xl-none`
Kubonakala ku-xl kuphela	`.d-none .d-xl-block`

hide on screens wider than lg

fihla ezikrinini ezincane kune-lg

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

Shintsha displayinani lama-elementi lapho uphrinta ngamakilasi ethu ensiza yokuphrinta. displayKufaka usekelo lwamanani afanayo .d-*nezinsiza zethu ezisabelayo.

.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

Amakilasi okuphrinta nawokuboniswa angahlanganiswa.

Isikrini Kuphela (Fihla ekuphrintiwe kuphela)

Print Only (Hide on screen only)

Fihla kuze kube kukhulu esikrinini, kodwa bonisa njalo ekuphrintiwe

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