Source

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

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

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

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

نوٹیشن

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

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

  • .d-{value}کے لیےxs
  • .d-{breakpoint}-{value}کے لیے sm, md, lg, اور 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
ایل جی سے چھوٹی اسکرینوں پر چھپائیں۔ 
<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>