in English

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

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

په دې پاڼه کې

څنګه کار کوي

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

مثالونه

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-block d-block

<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`

په 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-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
    ),