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

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

هن صفحي تي

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

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

نوٽيفڪيشن

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

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

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

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

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

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

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

مثال

ڊي-ان لائن

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

hide on lg and wider screens

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

پرنٽ ۽ ڊسپلي طبقن کي گڏ ڪري سگهجي ٿو.

صرف اسڪرين (صرف پرنٽ تي لڪايو)

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>

ساس

يوٽيلٽيز 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
    ),