Display property 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 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}for sm, md, lg, xl, leh xxl.

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 $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, , , leh screen- ah te a .d-lg-noneset a.display: none;lgxlxxl

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 chu pumpelh 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,xxl}-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-none .d-xxl-nonedevice lian leh lian tih loh screen size zawng zawng tan element chu a thup ang.

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