in English

ملڪيت ڏيکاريو

اسان جي ڊسپلي افاديتن سان جلدي ۽ جوابي طور تي اجزاء جي ڊسپلي قيمت کي ٽوگل ڪريو ۽ وڌيڪ. ڪجھ وڌيڪ عام قدرن لاءِ سپورٽ شامل آھي، ۽ گڏوگڏ ڇپائيءَ دوران ڊسپلي ڪنٽرول ڪرڻ لاءِ ڪجھ اضافي.

اهو ڪيئن ڪم ڪري ٿو

اسان جي جوابي ڊسپلي يوٽيلٽي ڪلاس سان displayملڪيت جي قيمت کي تبديل ڪريو . اسان مقصدي طور تي سڀني ممڪن قدرن جي صرف هڪ ذيلي سيٽ جي حمايت ڪندا آهيون display. ڪلاس مختلف اثرات لاءِ گڏ ڪري سگھجن ٿا جيئن توھان کي ضرورت آھي.

نوٽيفڪيشن

يوٽيلٽي ڪلاس ڏيکاريو جيڪي سڀني بريڪ پوائنٽس تي لاڳو ٿين ٿا ، کان xsوٺي xl، انھن ۾ ڪو به بريڪ پوائنٽ مخفف نه آھي. اهو ئي سبب آهي ته اهي طبقا لاڳو ڪيا ويا آهن min-width: 0;۽ مٿي کان، ۽ اهڙيء طرح ميڊيا جي سوال جي پابند نه آهن. باقي وقفي پوائنٽن ۾، جيتوڻيڪ، هڪ وقفي پوائنٽ مخفف شامل آهي.

جيئن ته، طبقن کي فارميٽ استعمال ڪندي رکيو ويو آهي:

.d-{value}لاءِxs
.d-{breakpoint}-{value}لاءِ sm, md, lg, and xl.

جتي قدر مان هڪ آهي:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

ڊسپلي جي قيمتن کي تبديل ڪري سگھجي ٿو متغير کي تبديل ڪندي $displays۽ SCSS کي ٻيهر ترتيب ڏيڻ.

ميڊيا سوالن تي اثر انداز ٿئي ٿو اسڪرين جي چوٽي کي ڏنل وقفي پوائنٽ سان يا وڏي . مثال طور، ٻنهي ۽ اسڪرين تي .d-lg-noneسيٽ .display: none;lgxl

مثال

ڊي-ان لائن

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