in English

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 deuh thenkhat support a keng tel a, chubakah print huna display control na tur extra thenkhat a awm bawk.

A hnathawh dan

Kan responsive display utility class hmangin displayproperty 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 xsto 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}for sm, md, lg, leh xl.

Khawiah nge value chu pakhat a nih:

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

Display value te chu $displaysvariable thlak a, SCSS recompiling hmangin a danglam thei bawk.

Media query te hian screen widths te chu breakpoint pek emaw a aia lian emaw a nghawng a ni . Entirnan, .d-lg-noneset display: none;pahnih lgleh xlscreen-ah te.

Entirna te

d-inline a ni
d-inline a ni 
<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 a ni d-block a ni 
<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-noneclass emaw class pakhat emaw hmangin .d-{sm,md,lg,xl}-noneresponsive screen variation eng pawh hmang mai rawh.

Screen size interval pek tawhah chauh element entir tur chuan class pakhat chu .d-*-noneclass nen i inzawm thei .d-*-*a, entirnan .d-none .d-md-block .d-xl-nonedevice 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
lg leh screen zau zawkah thup theih a ni
lg aia te zawk screen-ah thup rawh 
<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

displayKan print display utility class hmanga print kan tih hian element value kan thlak danglam thin. Kan responsive utilities te displayang 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.

Screen Only (Print-a thup chauh) .
Print Only (Screen-a thup chauh)
Screen-ah lian thlengin thup la, mahse print-ah erawh entir fo ang che 
<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>