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.
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.
Display utility class breakpoint zawng zawnga hman tur , atanga xs
to xl
, 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
, lehxl
.
Khawiah nge value chu pakhat a ni:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Media queries hian screen widths chu breakpoint pek emaw a aia lian emaw hmangin a nghawng a ni . Entirnan, .d-lg-none
set display: none;
pahnih lg
leh xl
screen-ah 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>
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 element responsive takin thup rawh.
Element thup tur chuan .d-none
class emaw class pakhat emaw hmangin .d-{sm,md,lg,xl}-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
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 |
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 |
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
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 tel bawk ..d-*
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.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>