Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
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становішча (у LTR)
  • bottom- для вертыкальнага bottomстановішча
  • end- для гарызантальнага rightстановішча (у LTR)

Дзе пазіцыя адна з:

  • 0- для 0кантавога становішча
  • 50- для 50%кантавога становішча
  • 100- для 100%кантавога становішча

(Вы можаце дадаць больш значэнняў пазіцыі, дадаўшы запісы ў $position-valuesзменную карты 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>

Цэнтральныя элементы

Акрамя таго, вы таксама можаце цэнтраваць элементы з дапамогай класа ўтыліты transform .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 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>

Вы можаце выкарыстоўваць гэтыя класы з існуючымі кампанентамі для стварэння новых. Памятайце, што вы можаце пашырыць яго функцыянальнасць, дадаўшы запісы ў $position-valuesзменную.

<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, а затым выкарыстоўваюцца для стварэння нашых утыліт.

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

API утыліт

Палажэнне ўтыліт аб'яўлена ў нашым API утыліт у scss/_utilities.scss. Даведайцеся, як выкарыстоўваць 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%),
      )
    ),