Esika
Salelá ba utilitaires oyo ya stenographie mpo na ko configurer noki position ya élément moko.
Mituya ya esika
Ba kelasi ya positionnement ya mbangu ezali, atako ezali ko répondre te.
<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>
Bongisá biloko oyo ezali na kati
Bongisa ba éléments facilement na ba utilitaires ya positionnement ya bord. Format na yango ezali {property}-{position}
.
Epayi wapi biloko ezali moko ya:
top
top
- mpo na position verticalestart
- mpo na position horizontaleleft
(na LTR) .bottom
bottom
- mpo na position verticaleend
- mpo na position horizontaleright
(na LTR) .
Epayi wapi position ezali moko ya:
0
- mpo0
na position ya bord50
- mpo50%
na position ya bord100
- mpo100%
na position ya bord
(Okoki kobakisa ba valeurs ya position mingi na kobakisa ba entrées na $position-values
variable ya carte 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>
Ba éléments ya centre
En plus, okoki pe ko centrer ba éléments na classe ya utilitaire transformer .translate-middle
.
Classe oyo e appliquer ba transformations translateX(-50%)
mpe translateY(-50%)
na élément oyo, en combinaison na ba utilitaires ya positionnement ya bord, e permettre yo o centrer absolument élément moko.
<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>
Na kobakisa .translate-middle-x
to .translate-middle-y
ba classes, ba éléments ekoki kozala positionné kaka na direction horizontale to verticale.
<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>
Bandakisa
Talá mwa bandakisa ya bomoi ya solosolo ya bakelasi yango:
<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>
Okoki kosalela ba classes oyo na ba composants oyo ezali pona kosala ya sika. Kobosana te ete okoki kobakisa mosala na yango na kobakisa ba entrées na $position-values
variable.
<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 oyo azali
Bakarte
Ba valeurs ya utilitaires ya position par défaut e déclaré na carte ya Sass, sima esalelamaka pona ko générer ba utilitaires na biso.
$position-values: (
0: 0,
50: 50%,
100: 100%
);
API ya ba utilitaires
Ba utilitaires ya position esakolami na API ya ba utilitaires na biso na scss/_utilities.scss
. Yekola ndenge ya kosalela API ya ba utilitaires.
"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%),
)
),