Source

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

Արագ և արձագանքող կերպով փոխեք բաղադրիչների ցուցադրման արժեքը և ավելին մեր ցուցադրման կոմունալ ծրագրերի միջոցով: Ներառում է որոշ ավելի տարածված արժեքների աջակցություն, ինչպես նաև տպագրության ժամանակ ցուցադրումը վերահսկելու համար լրացուցիչ հավելումներ:

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

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

Նշում

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

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

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

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

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

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

Օրինակներ

d-inline
d-inline
<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}-noneդասերից մեկը ցանկացած արձագանքող էկրանի փոփոխության համար:

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

Էկրանի չափը Դասարան
Թաքնված բոլորի վրա .d-none
Թաքնված է միայն xs-ում .d-none .d-sm-block
Թաքնված է միայն սմ .d-sm-none .d-md-block
Թաքնված է միայն md .d-md-none .d-lg-block
Թաքնված է միայն lg-ում .d-lg-none .d-xl-block
Թաքնված է միայն xl-ում .d-xl-none
Տեսանելի է բոլորի վրա .d-block
Տեսանելի է միայն xs-ում .d-block .d-sm-none
Տեսանելի է միայն սմ .d-none .d-sm-block .d-md-none
Տեսանելի է միայն md .d-none .d-md-block .d-lg-none
Տեսանելի է միայն lg-ով .d-none .d-lg-block .d-xl-none
Տեսանելի է միայն xl-ով .d-none .d-xl-block
hide on screens wider than lg
թաքցնել lg-ից փոքր էկրանների վրա
<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տարրերի արժեքը մեր տպագիր ցուցադրման օգտակար դասերի միջոցով տպելիս: Ներառում է աջակցություն նույն displayարժեքներին, ինչ մեր պատասխանատու .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 Only (Hide on screen only)
Թաքցրեք մինչև մեծ էկրանին, բայց միշտ ցուցադրեք տպագրության վրա
<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>