Display property a awm bawk
Kan display utilities hmang hian components leh thil dang tam tak display value chu rang tak leh chhanglet takin toggle theih a ni. Value hman tlanglawn zawk thenkhat support a awm a, chubakah print huna display control na tur extra thenkhat a awm bawk.
A hnathawh dan
Kan responsive display utility class hmangin display
property value chu thlak rawh . Kan tumruh takin value awm thei zawng zawng subset chauh kan support a display
. Class te chu i mamawh angin effect hrang hrang atan combine theih a ni.
Notation hmanga ziah a ni
Display utility class breakpoint zawng zawnga hman tur , atanga xs
to xxl
, te hian breakpoint abbreviation an nei lo. Hei hi a chhan chu chu class te chu atanga min-width: 0;
leh chunglam atanga hman a nih avangin media query-in a phuar lo a ni. Mahse, breakpoint dang zawng zawngah chuan breakpoint abbreviation a awm ve tho.
Chutiang a nih avang chuan class hrang hrangte chu hetiang hian an hming vuah a ni:
.d-{value}
tanxs
.d-{breakpoint}-{value}
forsm
,md
,lg
,xl
, lehxxl
.
Khawiah nge value chu pakhat a ni:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Display value te chu $displays
variable thlak a, SCSS recompiling hmangin a danglam thei bawk.
Media query te hian screen width te chu breakpoint pek emaw a aia lian emaw a nghawng a ni . Entirnan, , , leh screen- ah te a .d-lg-none
set a.display: none;
lg
xl
xxl
Entirna te
<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>
Element hrang hrang thup
Mobile-friendly development chak zawk neih nan device hrang hranga elements entir leh thup nan responsive display class hmang la. Site khata version hrang hrang siam vek loh la, chu ai chuan screen size tin atan elements responsive takin thup rawh.
Element thup tur chuan .d-none
class emaw class pakhat emaw hmangin .d-{sm,md,lg,xl,xxl}-none
responsive screen variation eng pawh hmang mai rawh.
Screen size interval pek tawhah chauh element entir tur chuan class pakhat chu .d-*-none
class nen i inzawm thei .d-*-*
a, entirnan .d-none .d-md-block .d-xl-none .d-xxl-none
device lian leh lian tih loh screen size zawng zawng tan element chu a thup ang.
Screen lian tham tak a ni | Pawl |
---|---|
Mi zawng zawng chungah thup a ni | .d-none |
xs ah chauh thup a ni | .d-none .d-sm-block |
Sm ah chauh thup a ni | .d-sm-none .d-md-block |
md ah chauh thup a ni | .d-md-none .d-lg-block |
lg ah chauh thup a ni | .d-lg-none .d-xl-block |
xl ah chauh thup a ni | .d-xl-none .d-xxl-block |
xxl ah chauh thup a ni | .d-xxl-none |
Mi zawng zawng chungah hmuh theih | .d-block |
xs ah chauh hmuh theih a ni | .d-block .d-sm-none |
Sm ah chauh hmuh theih a ni | .d-none .d-sm-block .d-md-none |
md ah chauh hmuh theih a ni | .d-none .d-md-block .d-lg-none |
lg ah chauh hmuh theih a ni | .d-none .d-lg-block .d-xl-none |
xl ah chauh hmuh theih a ni | .d-none .d-xl-block .d-xxl-none |
xxl ah chauh hmuh theih a ni | .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>
Print ah a rawn lang ang
display
Kan print display utility class hmanga print kan tih hian element value kan thlak danglam thin. Kan responsive utilities te display
ang value te tanpuina a huam tel bawk ..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
Print leh display class te chu a inzawm khawm thei bawk.
<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 a ni
Utilities API hmanga thil tih a ni
Display utilities chu kan utilities API ah hian scss/_utilities.scss
. Utilities API hman dan zir rawh.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),