Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Положај

Користите ове скраћене услужне програме за брзо конфигурисање положаја елемента.

Вредности положаја

Доступни су часови брзог позиционирања, иако не реагују.

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

Распоредите елементе

Лако распоредите елементе помоћу услужних програма за позиционирање ивица. Формат је {property}-{position}.

Где је имовина једно од:

  • top- за вертикални topположај
  • start- за хоризонтални leftположај (у ЛТР)
  • bottom- за вертикални bottomположај
  • end- за хоризонтални rightположај (у ЛТР)

Где је позиција једна од:

  • 0- за 0положај ивице
  • 50- за 50%положај ивице
  • 100- за 100%положај ивице

(Можете додати више вредности положаја додавањем уноса у $position-valuesпроменљиву мапе Сасс.)

хтмл
<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>

Централни елементи

Поред тога, такође можете центрирати елементе помоћу класе корисности трансформације .translate-middle.

Ова класа примењује трансформације translateX(-50%)и translateY(-50%)на елемент који вам, у комбинацији са услужним програмима за позиционирање ивица, омогућава да апсолутно центрирате елемент.

хтмл
<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>

Додавањем .translate-middle-xили .translate-middle-yкласама, елементи се могу позиционирати само у хоризонталном или вертикалном правцу.

хтмл
<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>

Примери

Ево неколико примера из стварног живота ових часова:

хтмл
<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>

Можете користити ове класе са постојећим компонентама за креирање нових. Запамтите да можете проширити његову функционалност додавањем уноса у $position-valuesпроменљиву.

хтмл
<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>

Сасс

Мапс

Подразумеване вредности услужних програма позиције су декларисане у Сасс мапи, а затим се користе за генерисање наших услужних програма.

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

Утилитиес АПИ

Услужни програми за позицију су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

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