Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

Pozicio

Uzu ĉi tiujn stenografioservaĵojn por rapide agordi la pozicion de elemento.

Poziciaj valoroj

Rapidaj poziciaj klasoj haveblas, kvankam ili ne estas respondemaj.

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

Aranĝu elementojn

Aranĝu elementojn facile per la rando poziciiga utilecoj. La formato estas {property}-{position}.

Kie posedaĵo estas unu el:

  • top- por la vertikala toppozicio
  • start- por la horizontala leftpozicio (en LTR)
  • bottom- por la vertikala bottompozicio
  • end- por la horizontala rightpozicio (en LTR)

Kie pozicio estas unu el:

  • 0- por 0rando pozicio
  • 50- por 50%rando pozicio
  • 100- por 100%rando pozicio

(Vi povas aldoni pli da poziciovaloroj aldonante enskribojn al la $position-valuesSass-mapo-variablo.)

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>

Centraj elementoj

Krome, vi ankaŭ povas centri la elementojn per la transform-utila klaso .translate-middle.

Ĉi tiu klaso aplikas la transformojn translateX(-50%)kaj translateY(-50%)al la elemento kiu, en kombinaĵo kun la rand-poziciaj utilecoj, permesas al vi absolute centri elementon.

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>

Aldonante .translate-middle-x.translate-middle-yklasojn, elementoj povas esti poziciigitaj nur en horizontala aŭ vertikala direkto.

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>

Ekzemploj

Jen kelkaj realvivaj ekzemploj de ĉi tiuj klasoj:

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>

Vi povas uzi ĉi tiujn klasojn kun ekzistantaj komponantoj por krei novajn. Memoru, ke vi povas etendi ĝian funkcion aldonante enirojn al la $position-valuesvariablo.

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

Mapoj

Defaŭltaj poziciaj utilvaloroj estas deklaritaj en Sass-mapo, tiam uzataj por generi niajn servaĵojn.

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

Utilaĵoj API

Poziciaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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%),
      )
    ),