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

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

අපගේ ප්‍රතිචාරාත්මක සංදර්ශක උපයෝගිතා පන්ති සමඟ 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

SCSS displayහි අර්ථ දක්වා ඇති අගයන් වෙනස් කිරීමෙන් සහ නැවත සම්පාදනය කිරීමෙන් සංදර්ශක අගයන් වෙනස් කළ හැක .$utilities

මාධ්‍ය විමසුම් ලබා දී ඇති කඩඉම් ලක්ෂ්‍යය හෝ ඊට වඩා විශාල තිරයේ පළලට බලපායි . උදාහරණයක් ලෙස, , සහ තිර මත .d-lg-noneසකසයි .display: none;lgxlxxl

උදාහරණ

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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>

සාස්

උපයෝගිතා 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
    ),