Ɖoƒe

Zã nuŋɔŋlɔ kpui siawo ƒe dɔwɔnu siawo hena ɖoɖowɔwɔ ɖe akpa aɖe ƒe nɔƒe ŋu kabakaba.

Le axa sia dzi

Ðoƒe ƒe asixɔxɔwo

Wowɔa ɖoƒe ɖoɖo kabakaba ƒe klasswo, togbɔ be womewɔa nu ɖe ame ŋu nyuie o hã.

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

Ðo nu veviwo ɖe ɖoɖo nu

Ðo nuawo ɖe ɖoɖo nu bɔbɔe kple nugbɔ ɖoɖo ƒe dɔwɔnuwo. Alesi wowɔa dɔee nye {property}-{position}.

Afisiwo nunɔamesiwo nye:

top- na tsitrenu topnɔnɔme
start- na nɔnɔme si le tsia dzi left(le LTR me) .
bottom- na tsitrenu bottomnɔnɔme
end- na nɔnɔme si le tsia dzi right(le LTR me) .

Afisi ɖoƒe nye:

0- na 0nugbɔ ƒe nɔnɔme
50- na 50%nugbɔ ƒe nɔnɔme
100- na 100%nugbɔ ƒe nɔnɔme

(Àteŋu atsɔ teƒe ƒe asixɔxɔ bubuwo akpe ɖe eŋu to nyawo tsɔtsɔ kpe ɖe $position-valuesSass ƒe anyigbatata ƒe tɔtrɔ ŋu me.)

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>

Titina ƒe akpawo

Tsɔ kpe ɖe eŋu la, àteŋu aɖo elementawo hã titina kple transform utility class .translate-middle.

Klass sia zãa tɔtrɔawo translateX(-50%)kple translateY(-50%)ɖe element si, le ƒoƒo me kple edge positioning utilities, ɖe mɔ na wò be nàde element aɖe titina bliboe.

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>

To tsɔtsɔ kpee .translate-middle-xalo .translate-middle-yklasswo me la, woateŋu aɖo nusiwo le tsia dzi alo le tsitrenu ko.

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>

Kpɔɖeŋuwo

Klass siawo ƒe agbemenudzɔdzɔ ŋutɔŋutɔ aɖewoe nye esi:

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>

Àteŋu azã klass siawo kple akpa siwo li xoxo atsɔ awɔ yeyewo. Ðo ŋku edzi be àte ŋu akeke eƒe dɔwɔwɔ ɖe enu to nyawo tsɔtsɔ kpe ɖe $position-valuestɔtrɔa ŋu me.

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 ƒe nyawo

Anyigbatatawo

Woɖea gbeƒã teƒe ƒe dɔwɔnu ƒe asixɔxɔ siwo woɖo ɖi le Sass ƒe anyigbatata me, emegbe wozãnɛ tsɔ wɔa míaƒe dɔwɔnuwo.

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

Dɔwɔnuwo ƒe API

Woɖe gbeƒã ɖoƒe ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

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