Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Toerana

Ampiasao ireto fitaovana fanafohezana ireto mba handrindrana haingana ny toeran'ny singa iray.

Soatoavina toerana

Misy kilasy fametrahana haingana, na dia tsy mamaly aza izy ireo.

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

Mandamina singa

Alaharo mora foana ny singa miaraka amin'ny fitaovana fametrahan'ny sisiny. Ny format dia {property}-{position}.

Ny fananana dia iray amin'ireo:

  • toptop- ho an'ny toerana mitsangana
  • start- ho an'ny toerana marindrano left(amin'ny LTR)
  • bottombottom- ho an'ny toerana mitsangana
  • end- ho an'ny toerana marindrano right(amin'ny LTR)

Ny toerana misy ny iray amin'ireo:

  • 0- ho an'ny 0toeran'ny sisiny
  • 50- ho an'ny 50%toeran'ny sisiny
  • 100- ho an'ny 100%toeran'ny sisiny

(Azonao atao ny manampy soatoavin'ny toerana bebe kokoa amin'ny alàlan'ny fampidirana ny fidirana amin'ny $position-valuesfari-piainan'ny sari-tany 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>

singa afovoany

Ho fanampin'izay, azonao atao ihany koa ny mampifantoka ny singa amin'ny kilasy fanovana utility .translate-middle.

Ity kilasy ity dia mampihatra ny fanovana translateX(-50%)sy translateY(-50%)ny singa izay, miaraka amin'ny fitaovana fametrahan'ny sisiny, mamela anao hampifantoka tanteraka ny singa iray.

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

Amin'ny fanampiana .translate-middle-xna .translate-middle-ykilasy, ny singa dia tsy azo apetraka afa-tsy amin'ny lalana marindrano na mitsangana.

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

OHATRA

Ireto misy ohatra tena misy amin'ireto kilasy ireto:

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

Azonao atao ny mampiasa ireo kilasy ireo miaraka amin'ireo singa efa misy mba hamoronana vaovao. Tsarovy fa azonao atao ny manitatra ny fampiasany amin'ny alalan'ny fampidirana entries amin'ny $position-valuesvariable.

<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

Maps

Ny sandan'ny fampiasa amin'ny toerana misy azy dia ambara ao amin'ny sarintany Sass, avy eo ampiasaina hamokarana ny kojakojay.

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

Utilities API

Ny fampandehanana ny toerana dia nambara ao amin'ny API fampiasantsika ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility 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%),
      )
    ),