Link diriirfame
Qaama HTML kamiyyuu ykn qaama Bootstrap kamiyyuu karaa CSS hidhaa nested “diriirsuu” akka cuqaafamuu danda’u godhi.
Uggurri isaa of keessaa qabu karaa elementii sobaa akka cuqaafamuu danda'u .stretched-link
gochuuf hidhaa irratti dabali . Yeroo baay'ee, kun qaamni isa waliin hidhaa gita waliin qabu cuqaasuu danda'a jechuudha. Maaloo hubadhu akkaataa CSS itti hojjetu kennameef , qaamolee gabatee irra caalaan waliin makamuu hin danda'u.::after
position: relative;
.stretched-link
position
.stretched-link
Kaartoonni akka position: relative
durtiitti Bootstrap keessatti qabu, kanaafuu haala kana keessatti .stretched-link
jijjiirama HTML biroo tokko malee gita gara hidhaa kaardii keessa jirutti nagaadhaan dabaluu dandeessa.
Hidhamtoonni dachaa fi target tuquun hidhamtoota diriirfaman waliin hin gorfaman. Haa ta'u malee, tokko tokkoo position
fi z-index
akkaataaleen yoo kun barbaachise gargaaruu danda'u.
Kaardii walitti hidhamiinsa diriirfame qabu
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Bakka tokko dhaqi<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>
Qaamonni amala baay'een isaanii durtii hin qaban , kanaaf walqabsiisni qaama warraatiin ala akka hin diriirneef as position: relative
dabaluu qabna ..position-relative
Qaama amala hidhaa diriiree qabu
Kun qabiyyee iddooqa tokko tokkoo qaama amalaaf. Qabiyyeen addunyaa dhugaa tokko tokko maal akka fakkaatu fakkeessuuf kan yaadame yoo ta'u, asitti qaamaafi guddina xiqqoo qaamaaf kennuudhaaf itti fayyadamaa jirra.
Bakka tokko dhaqi<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>
Tarreewwan walitti hidhamiinsa diriirfame qaban
Fakkeenya biraa qabiyyee iddooqa qaama amala biraa kanaaf. Qabiyyeen addunyaa dhugaa tokko tokko maal akka fakkaatu fakkeessuuf kan yaadame yoo ta'u, asitti qaamaafi guddina xiqqoo qaamaaf kennuudhaaf itti fayyadamaa jirra.
Bakka tokko dhaqi<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>
Blookii of keessaa qabu adda baasuu
Yoo hidhiin diriire waan hojjetu hin fakkaatu, uggurri of keessaa qabu sababa ta'uu hin oolu. Amaloonni CSS armaan gadii elementii tokko uggura of keessaa qabu ni godhu:
- Gatii
position
kan biraastatic
- A
transform
yknperspective
gatii kan biraatiin alanone
will-change
Gatiitransform
ykn _perspective
- Gatiin
filter
alanone
yknwill-change
gatiifilter
(Firefox qofa irratti hojjeta) .
Kaardii walitti hidhamiinsa diriirfame qabu
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Link diriirfame asitti hin hojjetu, sababiin isaas position: relative
link irratti dabalameera
Hidhiin diriirfame kun -tag qofa irratti ni babal'ata p
, sababni isaas jijjiirraan itti hojii irra oola.
<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>