د ملکیت ښکاره کول

څنګه کار کوي

زموږ د ځواب ویونکي ښودنې یوټیلټي ټولګیو سره د 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;lgxlxxl

مثالونه

<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

د ښودلو اسانتیاوې زموږ په یوټیلیټ 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
    ),