Txoj hauj lwm

Siv cov khoom siv luv luv no txhawm rau txhim kho txoj haujlwm ntawm ib lub caij sai sai.

Ntawm nplooj ntawv no

Txoj hauj lwm muaj nuj nqis

Cov chav kawm ceev ceev muaj, txawm tias lawv tsis teb.

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

Npaj cov khoom

Npaj cov ntsiab lus tau yooj yim nrog cov khoom siv ntawm ntug. Hom ntawv yog {property}-{position}.

Qhov twg khoom yog ib qho ntawm:

top- rau txoj tophauj lwm ntsug
start- rau txoj haujlwm kab rov tav left(hauv LTR)
bottom- rau txoj bottomhauj lwm ntsug
end- rau txoj haujlwm kab rov tav right(hauv LTR)

Qhov twg txoj hauj lwm yog ib qho ntawm:

0- rau 0ntug txoj hauj lwm
50- rau 50%ntug txoj hauj lwm
100- rau 100%ntug txoj hauj lwm

(Koj tuaj yeem ntxiv qhov tseem ceeb ntawm txoj haujlwm los ntawm kev ntxiv nkag rau $position-valuesSass daim ntawv qhia hloov pauv.)

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>

Center cov ntsiab lus

Tsis tas li ntawd, koj tuaj yeem ua qhov nruab nrab ntawm cov ntsiab lus nrog cov chav kawm siv hluav taws xob hloov pauv .translate-middle.

Cov chav kawm no siv cov kev hloov pauv translateX(-50%)thiab translateY(-50%)rau lub caij uas, ua ke nrog cov khoom siv ntawm ntug kev tso cai, tso cai rau koj los ua qhov nruab nrab ntawm lub ntsiab.

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>

Los ntawm kev ntxiv .translate-middle-xlossis .translate-middle-ychav kawm, cov ntsiab lus tuaj yeem muab tso rau hauv kab rov tav lossis ntsug.

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>

Piv txwv

Nov yog qee qhov piv txwv ntawm lub neej tiag tiag ntawm cov chav kawm no:

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>

Koj tuaj yeem siv cov chav kawm no nrog cov khoom uas twb muaj lawm los tsim cov tshiab. Nco ntsoov tias koj tuaj yeem txuas ntxiv nws txoj haujlwm los ntawm kev ntxiv cov ntawv nkag mus rau qhov $position-valuessib txawv.

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

Maps

Default position utility values raug tshaj tawm nyob rau hauv daim ntawv qhia Sass, ces siv los tsim peb cov khoom siv.

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

Utilities API

Qhov chaw siv hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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