Lien stretché
Aw bɛ HTML yɔrɔ walima Bootstrap yɔrɔ o yɔrɔ kɛ fɛn ye min bɛ se ka digi ni “stretching” ye nested link (yɔrɔ) dɔ la CSS fɛ.
A bɛ Fàra .stretched-link
'jyɛn-yɔrɔ dɔ kan walasa k'a kɔnɔfɛnw bloki Kɛ fɛn ye min bɛ Se ka digi ::after
pseudo element fɛ. A ka c’a la, o kɔrɔ ye ko fɛn min bɛ ni position: relative;
min bɛ ni jὲɲɔgɔnya ye ni .stretched-link
kalasi ye, o bɛ Se ka digi. Aw k’a kɔlɔsi ni CSS position
bɛ baara kɛ cogo min na , .stretched-link
a tɛ se ka ɲagami ni tabali yɔrɔ fanba ye.
Kartiw position: relative
bɛ Bootstrap kɔnɔ ka daminɛ, o la nin ko in na i bɛ se ka .stretched-link
kalasi fara ɲɔgɔn kan lafiya la karti kɔnɔ k’a sɔrɔ HTML caman ma Changé.
Jɛɲɔgɔnya caman ani tap targets tɛ ladilikan sɔrɔ ni jɛgɛnsira sɔgɔlenw ye. Nka, dɔw position
ni z-index
cogoyaw bɛ se ka dɛmɛ ni o kɛra wajibi ye.
Karti ni lien stretché
Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.
Taga yɔrɔ dɔ la<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
Laada-yɔrɔ fanba tɛ position: relative
ni default ye, o la an ka kan ka .position-relative
yan Fàra a kan walasa ka jὲɲɔgɔnya bali ka 'sèn Bɔ bangebaga-yɔrɔ kɔkan.
Component personnalisé ni lien stretché
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye ladamu-yɔrɔ la. A laɲini ye ka diɲɛ kɔnɔko lakika dɔw bɛna kɛ cogo min na, o ladege, wa an bɛ baara kɛ n’a ye yan walasa ka yɔrɔ in farikolo ni bonya dɔɔnin di a ma.
Taga yɔrɔ dɔ la<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Kolonw ni jɛgɛnsira sɔgɔlen
Yɔrɔ-yɔrɔ kɔnɔkow misali wɛrɛ nin ladamu-yɔrɔ wɛrɛ in na. A laɲini ye ka diɲɛ kɔnɔko lakika dɔw bɛna kɛ cogo min na, o ladege, wa an bɛ baara kɛ n’a ye yan walasa ka yɔrɔ in farikolo ni bonya dɔɔnin di a ma.
Taga yɔrɔ dɔ la<div class="row g-0 bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<img src="..." class="w-100" alt="...">
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Bloki min bɛ a kɔnɔ, o dɔnni
Ni a bɛ i n’a fɔ jɛgɛnsira min bɛ jɛgɛn, o tɛ baara kɛ, n’a sɔrɔla bloki min bɛ a kɔnɔ, o de bɛna kɛ sababu ye. Nin CSS nafolomafɛnw bɛna kɛ sababu ye ka fɛn dɔ kɛ bloki kɔnɔfɛnw ye:
- Nafa
position
wɛrɛ min tɛstatic
- A
transform
walimaperspective
nafa wɛrɛ min tɛnone
- A
will-change
nafa ka bontransform
walimaperspective
- Nafa
filter
wɛrɛ min tɛnone
walimawill-change
nafa min yefilter
(a bɛ baara kɛ Firefox dɔrɔn de kan)
Karti min bɛ ni jɛgɛnsira sɔgɔlenw ye
Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.
Stretched link tɛna baara kɛ yan, bawo position: relative
a bɛ fara link kan
O jɛgɛnsira in bɛna jɛnsɛn dɔrɔn p
-tag kan, bawo fɛn caman tigɛli bɛ kɛ a kan.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>