Lien oyo etandami
Sala que élément HTML to composant nionso ya Bootstrap ekoki ko cliquer na “stretching” lien encastré na nzela ya CSS.
Bakisa .stretched-link
na lien moko mpo na kosala ete bloc na yango oyo ezali na yango ezala cliquable na nzela ya ::after
pseudo élément. Mbala mingi, yango elakisi ete élément moko oyo ezali na position: relative;
oyo ezali na lien oyo ezali na .stretched-link
kelasi ezali oyo ekoki kofina. Svp yeba soki bapesi ndenge CSS position
esalaka , .stretched-link
ekoki kosangisama te na ba éléments mingi ya tableau.
Ba cartes bazali position: relative
na par défaut na Bootstrap, donc na cas oyo okoki kobakisa .stretched-link
classe sans danger na lien moko na carte sans changement mosusu ya HTML.
Ba liens ebele na ba cibles ya tap ezali recommandé te na ba liens étirés. Kasi, mosusu position
mpe z-index
mitindo ekoki kosalisa soki yango esɛngami.
Carte na lien étiré
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Kende esika moko boye<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>
Ba objets ya média ezalaka na position: relative
par défaut te, yango wana esengeli tobakisa .position-relative
awa pona kopekisa lien etandama libanda ya objet ya média.
Media na lien etandami
Oyo ezali mwa makambo ya esika ya kofanda mpo na eloko ya media. Ezali na mokano ya komekola oyo mwa makambo ya mokili ya solosolo ekozala lokola, mpe tozali kosalela yango awa mpo na kopesa eteni yango mwa nzoto mpe bonene.
Kende esika moko boye<div class="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media with stretched link</h5>
<p>This is some placeholder content for the media object. 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>
Ba colonnes ezali position: relative
par défaut, yango wana ba colonnes oyo ekoki ko cliquer esengaka kaka .stretched-link
classe na lien moko. Kasi, kotanda lien moko likoló ya mobimba .row
esɛngaka .position-static
na likoló mpe .position-relative
na molɔngɔ.
Makonzí oyo ezali na lien oyo etandami
Instance mosusu ya contenus ya placeholder pona composant oyo mosusu ya personnalisé. Ezali na mokano ya komekola oyo mwa makambo ya mokili ya solosolo ekozala lokola, mpe tozali kosalela yango awa mpo na kopesa eteni yango mwa nzoto mpe bonene.
Kende esika moko boye<div class="row no-gutters 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 position-static p-4 pl-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>
Koyeba bloc oyo ezali na kati
Soki lien oyo etandami emonani lokola ezali kosala te, bloc oyo ezali na yango ekozala mbala mosusu ntina. Ba propriétés ya CSS oyo elandi ekosala que élément ezala bloc oyo ezali na kati:
- Motuya
position
mosusu oyo ezali testatic
- A
transform
toperspective
motuya mosusu oyo ezali tenone
will-change
Motuya moko yatransform
toperspective
- Motuya
filter
mosusu longola senone
towill-change
motuya yafilter
(esalaka kaka na Firefox)
Carte na ba liens étirés
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Lien étirée ekosala awa te, po position: relative
ebakisami na lien
Lien oyo etandami ekopanzana kaka likolo ya p
-tag, po transformation esalemi na yango.
<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>