Source

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

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

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

اسان جي جوابي ڊسپلي يوٽيلٽي ڪلاس سان 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

ميڊيا سوالن کي ڏنل وقفي پوائنٽ يا وڏي سان اسڪرين جي چوٽي تي اثر پوي ٿو . مثال طور، ٻنهي ۽ اسڪرين تي .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
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>