Ɖoƒe
Zã nuŋɔŋlɔ kpui siawo ƒe dɔwɔnu siawo hena ɖoɖowɔwɔ ɖe akpa aɖe ƒe nɔƒe ŋu kabakaba.
Ðoƒe ƒe asixɔxɔwo
Wowɔa ɖoƒe ɖoɖo kabakaba ƒe klasswo, togbɔ be womewɔa nu ɖe ame ŋu nyuie o hã.
<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>
Ðo nu veviwo ɖe ɖoɖo nu
Ðo nuawo ɖe ɖoɖo nu bɔbɔe kple nugbɔ ɖoɖo ƒe dɔwɔnuwo. Alesi wowɔa dɔee nye {property}-{position}
.
Afisiwo nunɔamesiwo nye:
top
- na tsitrenutop
nɔnɔmestart
- na nɔnɔme si le tsia dzileft
(le LTR me) .bottom
- na tsitrenubottom
nɔnɔmeend
- na nɔnɔme si le tsia dziright
(le LTR me) .
Afisi ɖoƒe nye:
0
- na0
nugbɔ ƒe nɔnɔme50
- na50%
nugbɔ ƒe nɔnɔme100
- na100%
nugbɔ ƒe nɔnɔme
(Àteŋu atsɔ teƒe ƒe asixɔxɔ bubuwo akpe ɖe eŋu to nyawo tsɔtsɔ kpe ɖe $position-values
Sass ƒe anyigbatata ƒe tɔtrɔ ŋu me.)
<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>
Titina ƒe akpawo
Tsɔ kpe ɖe eŋu la, àteŋu aɖo elementawo hã titina kple transform utility class .translate-middle
.
Klass sia zãa tɔtrɔawo translateX(-50%)
kple translateY(-50%)
ɖe element si, le ƒoƒo me kple edge positioning utilities, ɖe mɔ na wò be nàde element aɖe titina bliboe.
<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>
To tsɔtsɔ kpee .translate-middle-x
alo .translate-middle-y
klasswo me la, woateŋu aɖo nusiwo le tsia dzi alo le tsitrenu ko.
<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>
Kpɔɖeŋuwo
Klass siawo ƒe agbemenudzɔdzɔ ŋutɔŋutɔ aɖewoe nye esi:
<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>
Àteŋu azã klass siawo kple akpa siwo li xoxo atsɔ awɔ yeyewo. Ðo ŋku edzi be àte ŋu akeke eƒe dɔwɔwɔ ɖe enu to nyawo tsɔtsɔ kpe ɖe $position-values
tɔtrɔa ŋu me.
<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 ƒe nyawo
Anyigbatatawo
Woɖea gbeƒã teƒe ƒe dɔwɔnu ƒe asixɔxɔ siwo woɖo ɖi le Sass ƒe anyigbatata me, emegbe wozãnɛ tsɔ wɔa míaƒe dɔwɔnuwo.
$position-values: (
0: 0,
50: 50%,
100: 100%
);
Dɔwɔnuwo ƒe API
Woɖe gbeƒã ɖoƒe ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss
. Srɔ̃ alesi nàzã utilities API lae.
"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%),
)
),