in English

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 displayamaxabiso achaziweyo $utilitieskunye nokubuyisela kwakhona i-SCSS.

Imibuzo yemidiya ichaphazela ububanzi besikrini kunye nendawo enikiweyo yoqhawulo okanye enkulu . Umzekelo, .d-lg-noneiiseti display: none;kwi lg, xl, kunye xxlnezikrini.

Imizekelo

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

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

zifihle kwi-lg kunye nezikrini ezibanzi

zifihle kwizikrini ezincinci kunelg

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

Shicilela Kuphela (Fihla kwiscreen kuphela)

Fihla ukuya kuthi ga kwiscreen, kodwa hlala ubonisa kwiprinta

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

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