Ցուցադրել սեփականությունը

Ինչպես է դա աշխատում

Փոխեք displayսեփականության արժեքը մեր արձագանքող ցուցադրման օգտակար դասերի միջոցով: Մենք միտումնավոր աջակցում ենք բոլոր հնարավոր արժեքների միայն ենթաբազմությանը display: Դասերը կարող են համակցվել տարբեր էֆեկտների համար, ինչպես ձեզ անհրաժեշտ է:

Նշում

Ցուցադրել օգտակար դասերը, որոնք վերաբերում են բոլոր ընդմիջման կետերին , սկսած xsմինչև xxl, դրանցում չկան ընդմիջման կետի հապավում: Դա պայմանավորված է նրանով, որ այդ դասերը կիրառվում են սկսած min-width: 0;և վերև, և, հետևաբար, կապված չեն մեդիա հարցումով: Մնացած ընդմիջման կետերը, այնուամենայնիվ, ներառում են ընդմիջման կետի հապավումը:

Որպես այդպիսին, դասերը կոչվում են հետևյալ ձևաչափով.

• .d-{value}համարxs
• .d-{breakpoint}-{value}համար sm, md, lg, xl, եւ xxl.

Որտեղ արժեքը մեկն է.

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

Ցուցադրման արժեքները կարող են փոփոխվել $displaysփոփոխականի փոփոխման և SCSS-ի վերակոմպիլյացիայի միջոցով:

Մեդիա հարցումները ազդում են էկրանի լայնությունների վրա՝ տվյալ բեկման կետով կամ ավելի մեծ : Օրինակ՝ .d-lg-noneդրվում display: none;է lg, xl, և xxlէկրանների վրա:

Օրինակներ

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

Թաքցնել տարրեր

Շարժական սարքերի համար ավելի արագ զարգացման համար օգտագործեք արձագանքող ցուցադրման դասեր՝ ըստ սարքի տարրերը ցուցադրելու և թաքցնելու համար: Խուսափեք նույն կայքի բոլորովին այլ տարբերակներ ստեղծելուց, փոխարենը թաքցրեք տարրերը արձագանքող յուրաքանչյուր էկրանի չափի համար:

Տարրերը թաքցնելու համար պարզապես օգտագործեք .d-noneդասը կամ .d-{sm,md,lg,xl,xxl}-noneդասերից մեկը ցանկացած արձագանքող էկրանի փոփոխության համար:

Էկրանի չափսերի միայն որոշակի միջակայքում տարրը ցուցադրելու համար կարող եք միավորել մեկ .d-*-noneդասը դասի հետ .d-*-*, օրինակ .d-none .d-md-block .d-xl-none .d-xxl-none՝ կթաքցնի տարրը էկրանի բոլոր չափերի համար, բացառությամբ միջին և մեծ սարքերի:

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

Ցուցադրել տպագրության մեջ

Փոխեք displayտարրերի արժեքը մեր տպագիր ցուցադրման օգտակար դասերի միջոցով տպելիս: Ներառում է աջակցություն նույն displayարժեքներին, ինչ մեր պատասխանատու .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

Տպման և ցուցադրման դասերը կարող են համակցվել:

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

Սաս

Utilities API

Ցուցադրման կոմունալ ծառայությունները հայտարարված են մեր Utilities API-ում scss/_utilities.scss: Իմացեք, թե ինչպես օգտագործել կոմունալ ծառայությունների API-ը:

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