Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Matsayi

Yi amfani da waɗannan abubuwan amfani na gajeriyar hannu don daidaita matsayi da sauri.

Matsayin matsayi

Akwai azuzuwan sakawa cikin sauri, kodayake ba sa amsawa.

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

Shirya abubuwa

Shirya abubuwa cikin sauƙi tare da kayan aikin sakawa gefen. Tsarin shine {property}-{position}.

Inda dukiya take daya daga cikin:

  • top- don topmatsayi na tsaye
  • start- don matsayi na kwance left(a cikin LTR)
  • bottom- don bottommatsayi na tsaye
  • end- don matsayi na kwance right(a cikin LTR)

Inda matsayi yana daya daga cikin:

  • 0- don 0matsayi na gefe
  • 50- don 50%matsayi na gefe
  • 100- don 100%matsayi na gefe

(Zaka iya ƙara ƙarin ƙimar matsayi ta ƙara shigarwar zuwa $position-valuesmadaidaicin taswirar 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>

Abubuwan tsakiya

Bugu da kari, zaku iya kuma tsakiyar abubuwan tare da ajin mai amfani mai canzawa .translate-middle.

Wannan ajin yana amfani da sauye-sauye translateX(-50%)da kuma translateY(-50%)kashi wanda, a hade tare da abubuwan amfani da matsayi na gefe, yana ba ku damar ci gaba da cikkaken kashi.

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

Ta ƙara .translate-middle-xko .translate-middle-yazuzuwan, abubuwa za a iya sanya su a kwance ko a tsaye kawai.

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

Misalai

Ga wasu misalan rayuwa na ainihi na waɗannan azuzuwan:

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

Kuna iya amfani da waɗannan azuzuwan tare da abubuwan da ke akwai don ƙirƙirar sababbi. Ka tuna cewa za ka iya tsawaita aikinsa ta ƙara shigarwar zuwa mai $position-valuescanzawa.

<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

Taswirori

Ana bayyana ƙimar amfani ta asali a cikin taswirar Sass, sannan a yi amfani da ita don samar da kayan aikin mu.

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

API ɗin Utilities

Ana bayyana abubuwan amfani a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

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