ڈسپلے پراپرٹی

ہماری ڈسپلے یوٹیلیٹیز کے ساتھ اجزاء کی ڈسپلے ویلیو اور مزید کو فوری اور جوابی طور پر ٹوگل کریں۔ کچھ زیادہ عام اقدار کے لیے سپورٹ کے ساتھ ساتھ پرنٹنگ کے وقت ڈسپلے کو کنٹرول کرنے کے لیے کچھ اضافی چیزیں شامل ہیں۔

اس صفحہ پر

یہ کیسے کام کرتا ہے

ہماری ریسپانسیو ڈسپلے یوٹیلیٹی کلاسز کے ساتھ displayپراپرٹی کی ویلیو کو تبدیل کریں ۔ ہم جان بوجھ کر کے لیے تمام ممکنہ اقدار کے صرف ذیلی سیٹ کی حمایت کرتے ہیں display۔ آپ کی ضرورت کے مطابق مختلف اثرات کے لیے کلاسز کو یکجا کیا جا سکتا ہے۔

نوٹیشن

یوٹیلیٹی کلاسز ڈسپلے کریں جو تمام بریک پوائنٹس پر لاگو ہوتے ہیں ، سے لے xsکر تک xxl، ان میں کوئی بریک پوائنٹ مخفف نہیں ہے۔ اس کی وجہ یہ ہے کہ وہ کلاسیں اوپر اور اوپر سے لگائی جاتی ہیں min-width: 0;، اور اس طرح میڈیا کے استفسار کے پابند نہیں ہیں۔ تاہم، باقی بریک پوائنٹس میں بریک پوائنٹ کا مخفف شامل ہے۔

اس طرح، کلاسوں کا نام فارمیٹ کا استعمال کرتے ہوئے رکھا گیا ہے:

.d-{value}کے لیےxs
.d-{breakpoint}-{value}کے لیے sm, md, lg, xl, اور xxl.

جہاں قدر میں سے ایک ہے:

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

ڈسپلے کی اقدار کو SCSS displayمیں بیان کردہ اقدار کو تبدیل کرکے اور دوبارہ مرتب کرکے تبدیل کیا جاسکتا ہے۔$utilities

میڈیا کے سوالات دیئے گئے بریک پوائنٹ یا اس سے بڑے کے ساتھ اسکرین کی چوڑائی کو متاثر کرتے ہیں ۔ مثال کے طور پر، پر سیٹ .d-lg-noneکرتا ہے ، اور اسکرینز۔display: none;lgxlxxl

مثالیں

ڈی ان لائن

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`

ایل جی اور وسیع سکرین پر چھپائیں۔

ایل جی سے چھوٹی اسکرینوں پر چھپائیں۔

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