Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Pozīcija

Izmantojiet šīs saīsinātās utilītas, lai ātri konfigurētu elementa pozīciju.

Pozīcijas vērtības

Ir pieejamas ātrās pozicionēšanas nodarbības, taču tās nav atsaucīgas.

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

Sakārtojiet elementus

Viegli sakārtojiet elementus ar malu pozicionēšanas utilītprogrammām. Formāts ir {property}-{position}.

Ja īpašums ir viens no:

  • top- vertikālam topstāvoklim
  • start- horizontālajam leftstāvoklim (LTR)
  • bottom- vertikālam bottomstāvoklim
  • end- horizontālajam rightstāvoklim (LTR)

Ja pozīcija ir viena no:

  • 0- 0malas pozīcijai
  • 50- 50%malas pozīcijai
  • 100- 100%malas pozīcijai

(Varat pievienot vairāk pozīcijas vērtību, pievienojot ierakstus $position-valuesSass kartes mainīgajam.)

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

Centra elementi

Turklāt jūs varat arī centrēt elementus ar transformācijas lietderības klasi .translate-middle.

Šī klase piemēro transformācijas translateX(-50%)un translateY(-50%)elementam, kas kombinācijā ar malu pozicionēšanas utilītprogrammām ļauj absolūtā centrēt elementu.

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

Pievienojot .translate-middle-xvai .translate-middle-yklases, elementus var novietot tikai horizontālā vai vertikālā virzienā.

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

Piemēri

Šeit ir daži šo nodarbību piemēri dzīvē:

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

Varat izmantot šīs klases ar esošajiem komponentiem, lai izveidotu jaunas. Atcerieties, ka varat paplašināt tā funkcionalitāti, pievienojot $position-valuesmainīgajam ierakstus.

<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

Kartes

Noklusējuma pozīcijas utilītas vērtības tiek deklarētas Sass kartē un pēc tam tiek izmantotas mūsu utilītu ģenerēšanai.

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

Utilities API

Pozīcijas utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss. Uzziniet, kā izmantot utilītu 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%),
      )
    ),