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 display
lesakhiwo 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 xs
ku- 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}
ngobasm
,md
,lg
,xl
kanyexxl
.
Lapho inani lingenye ye:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Amanani okubonisa angashintshwa ngokushintsha $displays
okuguquguqukayo nokuphinda kubuyiselwe i-SCSS.
Imibuzo yemidiya ithinta ububanzi besikrini nge-breakpoint enikeziwe noma enkulu . Isibonelo, .d-lg-none
ivula display: none;
, lg
, xl
kanye xxl
nezikrini.
Izibonelo
<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 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-none
ikilasi noma elinye .d-{sm,md,lg,xl,xxl}-none
lamakilasi kunoma yikuphi ukuhlukahluka kwesikrini esisabelayo.
Ukuze ubonise into ethile kuphela ngesikhawu esinikeziwe sosayizi besikrini ungahlanganisa isigaba esisodwa .d-*-none
nekilasi .d-*-*
, isibonelo .d-none .d-md-block .d-xl-none .d-xxl-none
sizofihla 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 .d-xxl-block |
Kufihlwe kuphela ku-xxl | .d-xxl-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 .d-xxl-none |
Kubonakala ku-xxl kuphela | .d-none .d-xxl-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 ngokuphrinta
Shintsha display
inani lama-elementi lapho uphrinta ngamakilasi ethu ensiza yokuphrinta. display
Kufaka 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.
<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
),