in English

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

زموږ د ښودنې اسانتیاو سره د اجزاو د ښودلو ارزښت او نور ډیر څه په چټکۍ او ځواب ویونکي ډول بدل کړئ. د ځینو نورو عامو ارزښتونو لپاره ملاتړ شامل دي، په بیله بیا د چاپ کولو په وخت کې د نندارې کنټرول لپاره ځینې اضافي.

څنګه کار کوي

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

د ښودلو ارزښتونه د $displaysمتغیر په بدلولو او د SCSS بیا تنظیمولو سره بدلیدلی شي.

د رسنیو پوښتنې د سکرین پلنوالی د ورکړل شوي بریک پوائنټ یا لوی سره اغیزه کوي . د مثال په توګه، په دواړو او سکرینونو کې .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
په lg او پراخه سکرینونو کې پټ کړئ
د 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-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>