Ipo

Lo awọn wọnyi shorthand igbesi fun ni kiakia tito le awọn ipo ti ohun ano.

Lori iwe yi

Awọn iye ipo

Awọn kilasi ipo iyara wa, botilẹjẹpe wọn ko ṣe idahun.

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

Ṣeto awọn eroja

Ṣeto awọn eroja ni irọrun pẹlu awọn ohun elo aye eti. Ọna kika jẹ {property}-{position}.

Nibo ohun-ini jẹ ọkan ninu:

top- fun awọn inaro topipo
start- fun ipo petele left(ni LTR)
bottom- fun awọn inaro bottomipo
end- fun ipo petele right(ni LTR)

Nibo ni ipo jẹ ọkan ninu:

0- fun 0ipo eti
50- fun 50%ipo eti
100- fun 100%ipo eti

(O le ṣafikun awọn iye ipo diẹ sii nipa fifi awọn titẹ sii si $position-valuesoniyipada maapu 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>

Awọn eroja aarin

Ni afikun, o tun le aarin awọn eroja pẹlu kilasi IwUlO iyipada .translate-middle.

Kilasi yii kan awọn iyipada translateX(-50%)ati translateY(-50%)si eroja eyiti, ni apapo pẹlu awọn ohun elo aye si eti, ngbanilaaye lati aarin nkan kan ni pipe.

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

Nipa fifi kun .translate-middle-xtabi .translate-middle-yawọn kilasi, awọn eroja le wa ni ipo nikan ni petele tabi itọsọna inaro.

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

Awọn apẹẹrẹ

Eyi ni diẹ ninu awọn apẹẹrẹ igbesi aye gidi ti awọn kilasi wọnyi:

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

O le lo awọn kilasi wọnyi pẹlu awọn paati ti o wa tẹlẹ lati ṣẹda awọn tuntun. Ranti pe o le fa iṣẹ ṣiṣe rẹ pọ si nipa fifi awọn titẹ sii si $position-valuesoniyipada naa.

<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

Awọn maapu

Awọn iye IwUlO ipo aiyipada ni ikede ni maapu Sass kan, lẹhinna lo lati ṣe ipilẹṣẹ awọn ohun elo wa.

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

API Awọn ohun elo

Awọn ohun elo ipo ni a kede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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