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 okusetshenziswa kwesibonisi asabelayo. 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 xskuye ukuya 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
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>