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.

Kuleli khasi

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- xxl, 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, xlkanye xxl.

Lapho inani lingenye ye:

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

Amanani okubonisa angashintshwa ngokushintsha displayamanani achazwe $utilitiesfuthi kubuyiselwe i-SCSS.

Imibuzo yemidiya ithinta ububanzi besikrini nge-breakpoint enikeziwe noma enkulu . Isibonelo, .d-lg-noneivula display: none;, lg, xlkanye xxlnezikrini.

Izibonelo

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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 izici ngokusabela kusayizi wesikrini ngamunye.

Ukuze ufihle ama-elementi vele usebenzise .d-noneikilasi noma elinye .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-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`
Kufihlwe kuphela ku-xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Kubonakala ku-xxl kuphela	`.d-none .d-xxl-block`

fihla ku-lg nezikrini ezibanzi

fihla ezikrinini ezincane kune-lg

html

<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 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-grid
.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)

Phrinta Kuphela (Fihla esikrinini kuphela)

Fihla kuze kube kukhulu esikrinini, kodwa bonisa njalo ekuphrintiwe

html

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

Sass

I-Utilities API

Izinsiza zokubonisa zimenyezelwa kuzinsiza zethu ze-API ku- scss/_utilities.scss. Funda indlela yokusebenzisa i-API yezinsiza.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),