Pontšo thepa

Ka potlako le ka karabelo toggle pontšo boleng ba dikarolo le ho feta le rona pontšo utilities. E akaretša thekgo ya tše dingwe tša dikelo tše di tlwaelegilego kudu, gammogo le tše dingwe tša tlaleletšo tša go laola pontšho ge o gatiša.

Letlakaleng le

Kamoo e šomago ka gona

Fetoša boleng bja displaythepa ka diklase tša rena tša utility tša pontšho tše di arabelago. Re thekga ka boomo feela sehlopha se senyenyane sa dikelo ka moka tše di kgonegago bakeng sa display. Diklase di ka kopanywa bakeng sa ditlamorago tše di fapa-fapanego ge o nyaka.

Notation

Bontšha diklase tša mohola tšeo di šomago go dintlha ka moka tša go kgaotša , go tloga xsgo go ya go xxl, ga di na khutsofatšo ya dintlha tša go kgaotša go tšona. Se ke ka lebaka la gore diklase tšeo di dirišwa go tloga min-width: 0;le godimo, gomme ka go realo ga di tlemilwe ke potšišo ya boraditaba. Dintlha tše di šetšego tša go kgaotša, le ge go le bjalo, di akaretša khutsofatšo ya dintlha tša go kgaotša.

Ka ge go le bjalo, diklase di reelwa maina ka go šomiša sebopego:

.d-{value}yaxs
.d-{breakpoint}-{value}bakeng sa sm, md, lg, xl, le xxl.

Moo boleng e lego e nngwe ya:

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

Ditekanyetšo tša pontšho di ka fetošwa ka go fetoša $displaysphetogo le go kgoboketša gape SCSS.

Dipotšišo tša boraditaba di ama bophara bja skrine ka ntlha ya go kgaotša ye e filwego goba ye kgolo . Ka mohlala, .d-lg-nonee beakanya display: none;ka lg, xl, le xxldiskrini.

Mehlala

d-ka gare ga mothaladi

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

Go uta dielemente

Bakeng sa tlhabollo ya ka pela yeo e nago le bogwera bja sellathekeng, diriša diklase tša pontšho tše di arabelago bakeng sa go bontšha le go uta dielemente ka sedirišwa. Phema go hlama diphetolelo tše di fapanego ka mo go feletšego tša lefelo le tee, go e na le moo uta dielemente ka go arabela bakeng sa bogolo bjo bongwe le bjo bongwe bja skrine.

Go uta dielemente o no šomiša .d-nonesehlopha goba ye nngwe ya .d-{sm,md,lg,xl,xxl}-nonediklase bakeng sa phapano efe goba efe ya skrine ye e arabelago.

Go bontšha elemente fela go sekgoba se se filwego sa bogolo bja skrine o ka kopanya .d-*-nonesehlopha se tee le .d-*-*sehlopha, mohlala o .d-none .d-md-block .d-xl-none .d-xxl-nonetla uta elemente ya bogolo bja skrine ka moka ntle le go didirišwa tša magareng le tše kgolo.

Bogolo bja skrine	Phapoši
E utilwe godimo ga bohle	`.d-none`
E utilwe feela ka xs	`.d-none .d-sm-block`
E utilwe feela ka sm	`.d-sm-none .d-md-block`
E utilwe feela ka md	`.d-md-none .d-lg-block`
E utilwe feela ka lg	`.d-lg-none .d-xl-block`
E utilwe feela ka xl	`.d-xl-none .d-xxl-block`
E utilwe feela ka xxl	`.d-xxl-none`
E bonagala go bohle	`.d-block`
E bonagala fela go xs	`.d-block .d-sm-none`
E bonagala fela go sm	`.d-none .d-sm-block .d-md-none`
E bonagala feela go md	`.d-none .d-md-block .d-lg-none`
E bonagala feela go lg	`.d-none .d-lg-block .d-xl-none`
E bonagala feela go xl	`.d-none .d-xl-block .d-xxl-none`
E bonagala fela go xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

pata ka diskrini tse nyenyane ho feta lg

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

Pontšo ka go phrintha

Fetoša displayboleng bja dielemente ge o phrintha ka diklase tša rena tša mohola wa pontšho ya go phrintha. E akaretša thekgo ya ditekanyetšo tše di swanago le tša didirišwa displaytša rena tše di arabelago ..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

Diklase tša go phrintha le tša pontšho di ka kopanywa.

Skrine Feela (Patago ka go gatiša fela) .

Print Only (Hide on screen only)

Pata go fihla go ye kgolo skrineng, eupša ka mehla bontšha go gatiša

<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

API ya Didirišwa

Didirišwa tša pontšho di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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