Njikọ gbatịrị agbatị
Mee ihe ọ bụla HTML ma ọ bụ akụrụngwa Bootstrap pịa site na “ịgbatị” njikọ akwụghị ụgwọ site na CSS.
Tinye .stretched-link
na njikọ iji mee ka ngọngọ nwere ike pịa ya site na ihe ::after
pseudo. N'ọtụtụ ọnọdụ, nke a pụtara na mmewere position: relative;
nwere njikọ nwere njikọ na .stretched-link
klaasị nwere ike ịpị. Biko mara na enyere ka CSS si position
arụ ọrụ , .stretched-link
enweghị ike ịgwakọta ya na ọtụtụ ihe tebụl.
Kaadị nwere position: relative
ndabara na Bootstrap, yabụ na nke a ị nwere ike itinye .stretched-link
klas ahụ na njikọ dị na kaadị ahụ n'enweghị mgbanwe HTML ọ bụla.
Ejighị njikọ gbatịa akwadoro ọtụtụ njikọ na ebumnuche mgbata. Agbanyeghị, ụfọdụ position
na z-index
ụdị nwere ike inye aka ma ọ bụrụ na achọrọ nke a.
Kaadị nwere njikọ agbatị
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
Gaa ebe<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>
Ihe mgbasa ozi enweghị position: relative
ndabara, yabụ anyị kwesịrị ịgbakwunye ebe .position-relative
a iji gbochie njikọ ahụ ịgbatị n'èzí ihe mgbasa ozi.
Mgbasa ozi nwere njikọ agbatị
Nke a bụ ụfọdụ ọdịnaya ejiri maka ihe mgbasa ozi. E bu n'obi ka eṅomie ihe ụfọdụ ọdịnaya ụwa ga-adị ka, anyị na-ejikwa ya ebe a inye akụkụ ahụ ntakịrị nke ahụ na nha.
Gaa ebe<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>
Ogidi bụ position: relative
na ndabara, yabụ kọlụm nwere ike pịa chọrọ naanị .stretched-link
klas na njikọ. Otú ọ dị, ịgbatị njikọ n'elu dum .row
chọrọ .position-static
na kọlụm na .position-relative
n'ahịrị.
Ogidi nwere njikọ agbatị
Ihe atụ ọzọ nke ọdịnaya edebe maka mpaghara omenala ndị ọzọ a. E bu n'obi ka eṅomie ihe ụfọdụ ọdịnaya ụwa ga-adị ka, anyị na-ejikwa ya ebe a inye akụkụ ahụ ntakịrị nke ahụ na nha.
Gaa ebe<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>
Ịmata ngọngọ nwere
Ọ bụrụ na njikọ agbatị adịghị ka ọ na-arụ ọrụ, ngọngọ nwere nwere ike ịbụ ihe kpatara ya. Njirimara CSS ndị a ga-eme ka mmewere bụrụ ngọngọ nwere:
- Uru
position
ọzọ karịastatic
- A
transform
ma ọ bụperspective
uru ọzọ karịanone
- Uru
will-change
nketransform
ma ọ bụperspective
- Uru
filter
ọzọ karịanone
ma ọ bụwill-change
uru nkefilter
(naanị na-arụ ọrụ na Firefox)
Kaadị nwere njikọ agbatị
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
Njikọ gbatịrị agbatị agaghị arụ ọrụ ebe a, n'ihi position: relative
na agbakwunyere na njikọ ahụ
A ga-agbasa njikọ a gbatịpụrụp
naanị na -tag, n'ihi na a na-etinye mgbanwe na ya.
<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>