Boemo

Sebelisa lisebelisoa tsena tse khuts'oane bakeng sa ho hlophisa kapele boemo ba element.

Leqepheng lena

Boemo ba maemo

Lithuto tsa ho beha maemo ka potlako lia fumaneha, leha li sa arabele.

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

Rulahanya likarolo

Hlophisa likarolo habonolo ka lisebelisoa tsa ho beha maemo. Sebopeho ke {property}-{position}.

Moo thepa e leng e 'ngoe ea:

toptop- bakeng sa boemo bo otlolohileng
start- bakeng sa leftboemo bo otlolohileng (ho LTR)
bottombottom- bakeng sa boemo bo otlolohileng
end- bakeng sa rightboemo bo otlolohileng (ho LTR)

Moo boemo e leng e 'ngoe ea:

0- bakeng sa 0boemo ba bohale
50- bakeng sa 50%boemo ba bohale
100- bakeng sa 100%boemo ba bohale

(O ka eketsa boleng ba maemo ka ho kenyelletsa likenyo ho $position-values'mapa oa 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>

Lintho tse bohareng

Ntle le moo, o ka boela oa beha lintho tse bohareng ka sehlopha sa lisebelisoa tsa phetoho .translate-middle.

Sehlopha sena se sebetsa ka liphetoho translateX(-50%)le translateY(-50%)ho element eo, hammoho le lits'ebeletso tsa boemo bo holimo, e u lumellang hore u be le setsi sa mantlha.

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

Ka ho eketsa .translate-middle-xkapa .translate-middle-ylitlelase, likarolo li ka beoa feela ka lehlakoreng le otlolohileng kapa le otlolohileng.

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

Mehlala

Mehlala ea 'nete ea litlelase tsena ke ena:

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

U ka sebelisa litlelase tsena tse nang le likarolo tse teng ho theha tse ncha. Hopola hore o ka eketsa ts'ebetso ea eona ka ho kenyelletsa likenyo ho $position-valuesfeto-fetoha.

<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

Limmapa

Maemo a kamehla a hlahisoa 'mapeng oa Sass, ebe o sebelisoa ho hlahisa lisebelisoa tsa rona.

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

Utilities API

Lisebelisoa tsa boemo li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa API.

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