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

مثالونه

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
یوازې په 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-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
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>