मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

स्थिती

घटकाची सुवात बेगीन संरचीत करपाखातीर ह्यो आशुलिपी उपयुक्तताय वापरात.

स्थिती मोलां

जलद स्थिती वर्ग उपलब्ध आसात, जरी ते प्रतिसाद दिवपी नासले तरी.

<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( 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>

केंद्र घटक

ते भायर, तुमी transform utility वर्गा वांगडा घटकांकय केंद्रीत करूंक शकतात .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>

सास

नकाशे तयार करतात

मुलभूत स्थिती उपयुक्तताय मोलां Sass नकाशांत जाहीर करतात, मागीर आमचीं उपयुक्तताय तयार करपाक वापरतात.

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

उपयुक्तताय एपीआय

स्थिती उपयुक्तताय आमच्या उपयुक्तताय एपीआयंत 2019 वर्सा जाहीर केल्या 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%),
      )
    ),