Link egoloddwa
Fuula ekintu kyonna ekya HTML oba ekitundu kya Bootstrap ekiyinza okunyigibwa nga “ogolola” enkolagana eteekeddwa mu kisenge ng’oyita mu CSS.
Okwongera .stretched-link
ku link okufuula block yaayo erimu clickable okuyita mu ::after
pseudo element. Ebiseera ebisinga, kino kitegeeza nti elementi position: relative;
erimu ekyo ekirimu enkolagana ne .stretched-link
kiraasi esobola okunyigibwa. Nsaba omanye given how CSS position
works , .stretched-link
tesobola kutabulwa na bintu bya mmeeza ebisinga obungi.
Kaadi zirina position: relative
by default mu Bootstrap, kale mu mbeera eno osobola bulungi okwongera .stretched-link
kiraasi ku link mu kaadi awatali nkyukakyuka ndala yonna eya HTML.
Enkolagana eziwera n’ebiruubirirwa by’okukwata tebirina bulungi nga zirina enkolagana ezigoloddwa. Wabula ebimu position
n’emisono z-index
bisobola okuyamba singa kino kiba kyetaagisa.
Kaadi eriko enkolagana egoloddwa
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Genda awalala<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>
Ebitundu ebisinga ebya custom tebirina position: relative
by default, kale twetaaga okugattako .position-relative
wano okuziyiza link okugolola ebweru w'ekintu ekizadde.
Ekitundu eky'ennono nga kiriko enkolagana egoloddwa
Kino kye kimu ku birimu ekifo eky'ekitundu eky'ennono. Kigendereddwamu okukoppa ebimu ku birimu eby’ensi entuufu bwe byandifaanana, era tubikozesa wano okuwa ekitundu ekyo akatono ak’omubiri n’obunene.
Genda awalala<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>
Empagi eziriko akakwate akagoloddwa
Ekyokulabirako ekirala eky'ebirimu ekifo eky'ekitundu kino ekirala eky'ennono. Kigendereddwamu okukoppa ebimu ku birimu eby’ensi entuufu bwe byandifaanana, era tubikozesa wano okuwa ekitundu ekyo akatono ak’omubiri n’obunene.
Genda awalala<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>
Okuzuula bulooka erimu
Singa ekiyungo ekigoloddwa tekirabika nga kikola, bulooka erimu osanga y’ejja okuba evuddeko. Ebintu bino wammanga ebya CSS bijja kufuula ekintu ekiziyiza ekirimu:
- Omuwendo
position
ogutali...static
- A
transform
obaperspective
omuwendo ogutalinone
- Omuwendo
will-change
gwatransform
obaperspective
- Omuwendo
filter
ogutalinone
obawill-change
omuwendo gwafilter
(gukola ku Firefox yokka)
Kaadi eriko ebiyungo ebigoloddwa
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Stretched link tegenda kukola wano, kubanga position: relative
eyongerwa ku link
Enkolagana eno egoloddwa ejja kusaasaanyizibwa ku p
-tag yokka, kubanga enkyukakyuka ekozesebwa ku yo.
<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>