Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Pozisyon

Sèvi ak sèvis piblik kout sa yo pou byen vit konfigirasyon pozisyon yon eleman.

Pozisyon valè

Klas pwezante rapid yo disponib, menm si yo pa reponn.

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

Ranje eleman yo

Fè aranjman pou eleman fasil ak sèvis piblik yo pwezante kwen. Fòma a se {property}-{position}.

Kote pwopriyete se youn nan:

  • toptop- pou pozisyon vètikal la
  • start- pou pozisyon orizontal left(nan LTR)
  • bottombottom- pou pozisyon vètikal la
  • end- pou pozisyon orizontal right(nan LTR)

Ki kote pozisyon se youn nan:

  • 0- pou 0pozisyon kwen
  • 50- pou 50%pozisyon kwen
  • 100- pou 100%pozisyon kwen

(Ou ka ajoute plis valè pozisyon lè w ajoute antre nan $position-valuesvaryab kat Sass la.)

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

Sant eleman

Anplis de sa, ou kapab tou santre eleman yo ak klas sèvis piblik transfòmasyon .translate-middle.

Klas sa a aplike transfòmasyon yo translateX(-50%)ak translateY(-50%)eleman ki, an konbinezon ak sèvis piblik pozisyon kwen yo, pèmèt ou santre absoli yon eleman.

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

Lè yo ajoute .translate-middle-xoswa .translate-middle-yklas, eleman yo ka pozisyone sèlman nan direksyon orizontal oswa vètikal.

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

Egzanp yo

Men kèk egzanp lavi reyèl nan klas sa yo:

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

Ou ka itilize klas sa yo ak eleman ki deja egziste pou kreye nouvo. Sonje ke ou ka pwolonje fonksyonalite li yo lè w ajoute antre nan $position-valuesvaryab la.

<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

Kat

Yo deklare valè sèvis piblik pozisyon yo nan yon kat Sass, epi yo itilize yo pou jenere sèvis piblik nou yo.

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

Itilite API

Pozisyon sèvis piblik yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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