Негізгі мазмұнға өту Құжаттар шарлауына өту
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позиция үшін (LTR бойынша)
  • bottom- тік bottomпозиция үшін
  • end- көлденең rightпозиция үшін (LTR бойынша)

Мұндағы позиция мыналардың бірі болып табылады:

  • 0- 0жиек орналасуы үшін
  • 50- 50%жиек орналасуы үшін
  • 100- 100%жиек орналасуы үшін

$position-values( Sass картасы айнымалысына жазбаларды қосу арқылы көбірек орын мәндерін қосуға болады .)

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>

Орталық элементтер

Оған қоса, элементтерді transform утилита класы арқылы ортаға қоюға болады .translate-middle.

Бұл класс түрлендірулерді translateX(-50%)және translateY(-50%)элементті жиекті орналастыру утилиталарымен бірге элементті абсолютті орталықтандыруға мүмкіндік беретін элементке қолданады.

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>

Қосу .translate-middle-xнемесе .translate-middle-yсыныптар арқылы элементтерді тек көлденең немесе тік бағытта орналастыруға болады.

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>

Мысалдар

Міне, осы сабақтардың нақты өмірлік мысалдары:

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>

Жаңасын жасау үшін осы сыныптарды бар құрамдастармен пайдалануға болады. $position-valuesАйнымалыға жазбаларды қосу арқылы оның функционалдығын кеңейтуге болатынын есте сақтаңыз .

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 картасында жарияланады, содан кейін утилиталарымызды жасау үшін пайдаланылады.

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

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