پوزیشن
کسی عنصر کی پوزیشن کو تیزی سے ترتیب دینے کے لیے ان شارٹ ہینڈ یوٹیلیٹیز کا استعمال کریں۔
پوزیشن کی اقدار
فوری پوزیشننگ کلاسز دستیاب ہیں، حالانکہ وہ جوابدہ نہیں ہیں۔
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
عناصر کو ترتیب دیں۔
ایج پوزیشننگ یوٹیلیٹیز کے ساتھ عناصر کو آسانی سے ترتیب دیں۔ فارمیٹ ہے {property}-{position}
۔
جہاں جائیداد میں سے ایک ہے:
top
- عمودیtop
پوزیشن کے لئےstart
- افقیleft
پوزیشن کے لیے (LTR میں)bottom
- عمودیbottom
پوزیشن کے لئےend
- افقیright
پوزیشن کے لیے (LTR میں)
جہاں پوزیشن میں سے ایک ہے:
0
-0
کنارے کی پوزیشن کے لئے50
-50%
کنارے کی پوزیشن کے لئے100
-100%
کنارے کی پوزیشن کے لئے
$position-values
(آپ Sass نقشہ متغیر میں اندراجات شامل کرکے پوزیشن کی مزید قدریں شامل کر سکتے ہیں ۔)
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-50"></div>
<div class="position-absolute bottom-50 end-50"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
مرکزی عناصر
اس کے علاوہ، آپ ٹرانسفارم یوٹیلیٹی کلاس کے ساتھ عناصر کو سینٹر بھی کر سکتے ہیں .translate-middle
۔
یہ کلاس تبدیلیوں translateX(-50%)
اور translateY(-50%)
اس عنصر پر لاگو ہوتی ہے جو، کنارے کی پوزیشننگ افادیت کے ساتھ مل کر، آپ کو کسی عنصر کو مطلق مرکز کرنے کی اجازت دیتی ہے۔
<div class="position-relative">
<div class="position-absolute top-0 start-0 translate-middle"></div>
<div class="position-absolute top-0 start-50 translate-middle"></div>
<div class="position-absolute top-0 start-100 translate-middle"></div>
<div class="position-absolute top-50 start-0 translate-middle"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 start-100 translate-middle"></div>
<div class="position-absolute top-100 start-0 translate-middle"></div>
<div class="position-absolute top-100 start-50 translate-middle"></div>
<div class="position-absolute top-100 start-100 translate-middle"></div>
</div>
جوڑ کر .translate-middle-x
یا .translate-middle-y
کلاس کر کے، عناصر کو صرف افقی یا عمودی سمت میں رکھا جا سکتا ہے۔
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 start-50 translate-middle-x"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-0 translate-middle-y"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 end-0 translate-middle-y"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
مثالیں
یہاں ان کلاسوں کی کچھ حقیقی زندگی کی مثالیں ہیں:
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
آپ ان کلاسوں کو موجودہ اجزاء کے ساتھ استعمال کرکے نئی تخلیق کرسکتے ہیں۔ یاد رکھیں کہ آپ $position-values
متغیر میں اندراجات شامل کرکے اس کی فعالیت کو بڑھا سکتے ہیں۔
<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
سس
نقشے
ڈیفالٹ پوزیشن یوٹیلیٹی ویلیوز کا اعلان ساس میپ میں کیا جاتا ہے، پھر ہماری یوٹیلیٹیز بنانے کے لیے استعمال کیا جاتا ہے۔
$position-values: (
0: 0,
50: 50%,
100: 100%
);
یوٹیلیٹیز API
پوزیشن کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss
. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔
"position": (
property: position,
values: static relative absolute fixed sticky
),
"top": (
property: top,
values: $position-values
),
"bottom": (
property: bottom,
values: $position-values
),
"start": (
property: left,
class: start,
values: $position-values
),
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),