Enlace estirado
Ima HTML elementotapas utaq Bootstrap componentetapas ñit’inapaq ruway “stretching” huk anidado t’inki CSS kaqnintakama.
.stretched-link
Huk t'inkiman yapay , chaypi kaq bloqueta::after
huk pseudo elemento kaqnintakama ñit'inapaq kananpaq . Yaqa llapanpi, kayqa niyta munan huk elemento chaywan position: relative;
huk t'inkiyuq .stretched-link
clasewan ñit'inapaq kaqta. Ama hina kaspa, qhaway imayna CSS position
llamk'asqanmanta qusqa , .stretched-link
mana aswan tabla elementokunawan chaqrusqa kanmanchu.
Tarjetakuna position: relative
ñawpaqmanta Bootstrap kaqpi kanku, chayrayku kayhina kaqpi mana imamanta manchakuspa .stretched-link
claseta tarjetapi huk t'inkiman yapayta atikunki mana wak HTML tikraykunawan.
Achka t'inkikuna chaymanta tap metakuna mana llañu t'inkikunawan yuyaychasqachu. Ichaqa wakin position
chaymanta z-index
estilokuna yanapanman sichus kayta mañakunman.
Tarjeta con eslabón estirado
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Maymanpas riy<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>
Media objetokuna mana position: relative
ñawpaqmantachu kan, chayrayku kaypi yapananchik .position-relative
tiyan mana t'inki willaypa objeto hawanpi mast'arikunanpaq.
Medios de comunicación con enlace estirado
Kayqa wakin tiyanayuq imahinam willay mast'ariqpa kaqninpaq. Chayqa ruwasqa kachkan imayna wakin chiqa pacha contenido rikchakunman chayta qatipanapaq, chaymanta kaypi llamk'achkayku componenteman huk chhika cuerpota chaymanta sayayninta qunaykupaq.
Maymanpas riy<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>
position: relative
Sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqakuna huk t'inkipi kaq clasellatam .stretched-link
munan. Ichaqa huk t’inkita llapanpi mast’ariyqa columnapi, filapi ima .row
necesitakun ..position-static
.position-relative
Columnas con eslabón estirado
Huk instancia kay wak sapanchasqa componentapaq tiyanayuq imayna kananmanta. Chayqa ruwasqa kachkan imayna wakin chiqa pacha contenido rikchakunman chayta qatipanapaq, chaymanta kaypi llamk'achkayku componenteman huk chhika cuerpota chaymanta sayayninta qunaykupaq.
Maymanpas riy<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>
Chaypi kaq bloqueta riqsichiy
Sichus llañu t'inki mana llamk'aq hinachu, chay hap'iq bloqueqa ichapas chayrayku kanqa. Kay qatiq CSS propiedades huk elementota ruwanqa chay bloqueta hap'iq:
- Huk
position
chaniyuq manastatic
- A
transform
utaqperspective
valor hukmantanone
- Huk
will-change
valor detransform
operspective
- Huk
filter
chani mananone
utaq hukwill-change
chani kaqmantafilter
(Firefox kaqllapi llamk'an)
Tarjeta con eslabones estirados
Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.
Kaypi llañuchasqa t'inkiqa manam llamk'anqachu, position: relative
t'inkiman yapasqa kasqanrayku
Kay llañu t'inkiqa -tag nisqallapim mast'arikunqa, p
chayman huk tikray churasqa kasqanrayku.
<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>