Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Gita hojii

Faayidaa gabaabduu kana fayyadamii saffisaan iddoo elementii qindeessuuf.

Gatii ejjennoo

Deebii kan hin kennine ta’us, kutaaleen saffisaan bakka itti kaa’an ni jiru.

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

Elementiiwwan qindeessuu

Faayidaa iddoowwan qarqaraa waliin elementoota salphaatti qindeessii. Akkaataan isaa {property}-{position}.

Bakka qabeenyi keessaa tokko ta’etti:

  • toptop- bakka dhaabbataa ta’eef
  • start- bakka qajeelaa left(LTR keessatti) .
  • bottombottom- bakka dhaabbataa ta’eef
  • end- bakka qajeelaa right(LTR keessatti) .

Bakka ejjennoo keessaa tokko ta’etti:

  • 0- 0ejjennoo qarqaraaf
  • 50- 50%ejjennoo qarqaraaf
  • 100- 100%ejjennoo qarqaraaf

$position-values(Galtee jijjiiramaa kaartaa Sass irratti dabaluudhaan gatiiwwan iddoo dabalataa dabaluu dandeessa .)

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

Qaamolee giddugaleessaa

Dabalataan, qaamolee gita faayidaa jijjiirraa waliinis giddugaleessa gochuu dandeessa .translate-middle.

Gitni kun jijjiirraawwanii translateX(-50%)fi translateY(-50%)elementii irratti hojii irra oolcha kunis, faayidaalee iddoo qarqaraa wajjin walqabatee, elementii tokko giddu galeessa guutuu akka gootu si dandeessisu.

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

Dabaluu .translate-middle-xykn .translate-middle-ygitaalee, elementoonni kallattii qajeelaa yookiin dhaabbataa qofaan dhaabbachuu danda'u.

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

Fakkeenyaaf

Fakkeenyonni jireenya dhugaa gita kanaa tokko tokko kunooti:

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

Gitoota kana qaamolee jiran waliin fayyadamuun haaraa uumuu dandeessa. $position-valuesJijjiiramaa irratti galtee dabaluudhaan dalagaa isaa dheeressuu akka dandeessu yaadadhu .

html
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="Progress" 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 jedhama

Kaartaa

Gatiin faayidaa iddoo durtii kaartaa Sass keessatti labsamu, sana booda faayidaa keenya uumuuf fayyadamu.

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

API faayidaa

Faayidaaleen ejjennoo API faayilii keenya keessatti bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.

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