ڈسپلے پراپرٹی
ہماری ڈسپلے یوٹیلیٹیز کے ساتھ اجزاء کی ڈسپلے ویلیو اور مزید کو فوری اور جوابی طور پر ٹوگل کریں۔ کچھ زیادہ عام اقدار کے لیے سپورٹ کے ساتھ ساتھ پرنٹنگ کے وقت ڈسپلے کو کنٹرول کرنے کے لیے کچھ اضافی چیزیں شامل ہیں۔
یہ کیسے کام کرتا ہے
ہماری ریسپانسیو ڈسپلے یوٹیلیٹی کلاسز کے ساتھ 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
متغیر کو تبدیل کرکے $displays
اور SCSS کو دوبارہ مرتب کرکے ڈسپلے کی اقدار کو تبدیل کیا جاسکتا ہے۔
میڈیا کے سوالات دیئے گئے بریک پوائنٹ یا اس سے بڑے کے ساتھ اسکرین کی چوڑائی کو متاثر کرتے ہیں ۔ مثال کے طور پر، دونوں اور اسکرینوں پر .d-lg-none
سیٹ کرتا ہے۔display: none;
lg
xl
مثالیں
<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 |
<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-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>