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.

Kweli phepha

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 xxl, 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, lg, xlkunye xxl.

Apho ixabiso liyenye ye:

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

Amaxabiso omboniso angatshintshwa ngokutshintsha $displaysokuguquguqukayo kunye nokubuyisela kwakhona i-SCSS.

Imibuzo yemidiya ichaphazela ububanzi besikrini ngenqaku elinikiweyo loqhawulo okanye elikhulu . Umzekelo, .d-lg-noneiiseti display: none;kwi lg, xl, kunye xxlnezikrini.

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

Ukufihla izinto ngokulula sebenzisa .d-noneiklasi okanye enye .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-noneiyakufihla ielementi yazo zonke iisayizi zesikrini ngaphandle kwezixhobo eziphakathi nezinkulu.

Ubungakanani bekhusi	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 .d-xxl-block`
Ifihlwe kuphela kwi-xxl	`.d-xxl-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 .d-xxl-none`
Ibonakala kuphela kwi-xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

zifihle kwizikrini ezincinci kunelg

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

Sass

Utilities API

I-Display utility ibhengezwe kwizinto eziluncedo zethu ze-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo API.

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