ملڪيت ڏيکاريو
اسان جي ڊسپلي افاديتن سان جلدي ۽ جوابي طور تي اجزاء جي ڊسپلي قيمت کي ٽوگل ڪريو ۽ وڌيڪ. ڪجھ وڌيڪ عام قدرن لاءِ سپورٽ شامل آھي، ۽ گڏوگڏ ڇپائيءَ دوران ڊسپلي ڪنٽرول ڪرڻ لاءِ ڪجھ اضافي.
اهو ڪيئن ڪم ڪري ٿو
اسان جي جوابي ڊسپلي يوٽيلٽي ڪلاس سان display
ملڪيت جي قيمت کي تبديل ڪريو . اسان مقصدي طور تي سڀني ممڪن قدرن جي صرف هڪ ذيلي سيٽ جي حمايت ڪندا آهيون display
. ڪلاس مختلف اثرات لاءِ گڏ ڪري سگھجن ٿا جيئن توھان کي ضرورت آھي.
نوٽيفڪيشن
يوٽيلٽي ڪلاس ڏيکاريو جيڪي سڀني بريڪ پوائنٽس تي لاڳو ٿين ٿا ، کان xs
وٺي xxl
، انھن ۾ ڪو به بريڪ پوائنٽ مخفف نه آھي. اهو ئي سبب آهي ته اهي طبقا لاڳو ڪيا ويا آهن min-width: 0;
۽ مٿي کان، ۽ اهڙيء طرح ميڊيا جي سوال جي پابند نه آهن. باقي وقفي پوائنٽن ۾، جيتوڻيڪ، هڪ وقفي پوائنٽ مخفف شامل آهي.
جيئن ته، طبقن کي فارميٽ استعمال ڪندي رکيو ويو آهي:
.d-{value}
لاءِxs
.d-{breakpoint}-{value}
لاءsm
,md
,lg
,xl
, andxxl
.
جتي قدر مان هڪ آهي:
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 |
<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>
ساس
يوٽيلٽيز 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
),