दरजा
कवनो तत्व के स्थिति के जल्दी से कॉन्फ़िगर करे खातिर एह आशुलिपि उपयोगिता सभ के इस्तेमाल करीं।
स्थिति के मान के बारे में बतावल गइल बा
क्विक पोजीशनिंग क्लास उपलब्ध बा, हालांकि ई रिस्पांसिव ना होखे।
<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
स्थिति खातिर (एलटीआर में)bottom
- ऊर्ध्वाधरbottom
स्थिति खातिरend
- क्षैतिजright
स्थिति खातिर (एलटीआर में)
जहाँ पद में से एगो बा:
0
-0
किनारा के स्थिति खातिर50
-50%
किनारा के स्थिति खातिर100
-100%
किनारा के स्थिति खातिर
$position-values
( सस मैप चर में प्रविष्टि जोड़ के रउआँ अउरी स्थिति मान जोड़ सकत बानी ।)
<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%
);
उपयोगिता एपीआई के बा
स्थिति उपयोगिता के हमनी के उपयोगिता एपीआई में घोषित कइल गइल बा scss/_utilities.scss
. उपयोगिता एपीआई के इस्तेमाल करे के तरीका जानें।
"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%),
)
),