in English

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

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

اس صفحہ پر

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

ہماری ریسپانسیو ڈسپلے یوٹیلیٹی کلاسز کے ساتھ 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

متغیر کو تبدیل کرکے $displaysاور SCSS کو دوبارہ مرتب کرکے ڈسپلے کی اقدار کو تبدیل کیا جاسکتا ہے۔

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

مثالیں

ڈی ان لائن

<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

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

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