දේපල පෙන්වන්න

අපගේ සංදර්ශක උපයෝගිතා සමඟ සංරචක සහ තවත් දේවල සංදර්ශක අගය ඉක්මනින් සහ ප්‍රතිචාරාත්මකව ටොගල් කරන්න. මුද්‍රණය කිරීමේදී සංදර්ශකය පාලනය කිරීම සඳහා වඩාත් පොදු අගයන් කිහිපයක් සඳහා සහය ඇතුළත් වේ.

මෙම පිටුවේ

එය ක්රියා කරන ආකාරය

අපගේ ප්‍රතිචාරාත්මක සංදර්ශක උපයෝගිතා පන්ති සමඟ displayදේපලෙහි වටිනාකම වෙනස් කරන්න . අපි හිතාමතාම සහය දක්වන්නේ display. ඔබට අවශ්ය පරිදි විවිධ බලපෑම් සඳහා පන්ති ඒකාබද්ධ කළ හැකිය.

අංකනය

සිට දක්වා සියලු කඩඉම් සඳහා අදාළ වන උපයෝගිතා පන්ති සංදර්ශක ඒවායේ බිඳුම් ලක්ෂ්‍ය කෙටි කිරීමක් නොමැත. මක්නිසාද යත්, එම පන්ති සිට සහ ඉහළට අදාළ වන අතර, මාධ්‍ය විමසුමකින් බැඳී නොමැති බැවිනි. කෙසේ වෙතත්, ඉතිරි බිඳුම් ලක්ෂ්‍යවලට බිඳුම් ලක්ෂ්‍ය සංක්ෂිප්තයක් ඇතුළත් වේ.xsxxlmin-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;lgxlxxl

උදාහරණ

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>

d-බ්ලොක් d-බ්ලොක්

<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මධ්‍යම සහ විශාල උපාංගවල හැර අනෙකුත් සියලුම තිර ප්‍රමාණයන් සඳහා මූලද්‍රව්‍යය සඟවයි.

තිර ප්රමාණය	පන්තිය
සියල්ල තුළ සැඟවී ඇත	`.d-none`
xs මත පමණක් සැඟවී ඇත	`.d-none .d-sm-block`
sm මත පමණක් සැඟවී ඇත	`.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-xxl-block`
xxl මත පමණක් සැඟවී ඇත	`.d-xxl-none`
සියල්ලටම පෙනෙන	`.d-block`
xs මත පමණක් දෘශ්‍යමාන වේ	`.d-block .d-sm-none`
sm මත පමණක් දෘශ්‍යමාන වේ	`.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 .d-xxl-none`
xxl මත පමණක් දෘශ්‍යමාන වේ	`.d-none .d-xxl-block`

hide on lg and wider screens

lg වලට වඩා කුඩා තිර මත සඟවන්න

<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

මුද්රණ සහ සංදර්ශක පන්ති ඒකාබද්ධ කළ හැකිය.

තිරය පමණක් (මුද්‍රණය මත පමණක් සඟවන්න)

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>

සාස්

උපයෝගිතා API

සංදර්ශක උපයෝගිතා අපගේ උපයෝගිතා 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
    ),