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

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

هن صفحي تي

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

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

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

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

مثال

ڊي-ان لائن

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

ڊي-بلاڪ ڊي-بلاڪ

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
لڪايو صرف xxl تي	`.d-xxl-none .d-xxl-block`
سڀني تي ظاهر	`.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 کان ننڍي اسڪرين تي لڪايو

html

<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

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

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

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

اسڪرين تي وڏي تائين لڪايو، پر هميشه پرنٽ تي ڏيکاريو

html

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