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-linkna njikọ iji mee ka ngọngọ nwere ike pịa ya site na ihe ::afterpseudo. N'ọtụtụ ọnọdụ, nke a pụtara na mmewere position: relative;nwere njikọ nwere njikọ na .stretched-linkklaasị nwere ike ịpị. Biko mara na enyere ka CSS si positionarụ ọrụ , .stretched-linkenweghị ike ịgwakọta ya na ọtụtụ ihe tebụl.

Kaadị nwere position: relativendabara na Bootstrap, yabụ na nke a ị nwere ike itinye .stretched-linkklas 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ụ positionna 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

html

<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>

Ọtụtụ ngwa ọdịnala enweghị position: relativendabara, yabụ anyị kwesịrị ịgbakwunye ebe .position-relativea iji gbochie njikọ ahụ ịgbatị na mpụga mmewere nne na nna.

Akụkụ omenala nwere njikọ agbatị

Nke a bụ ụfọdụ ọdịnaya edebe maka akụrụngwa omenala. 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

html

<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>

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

html

<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>

Ị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 transformma ọ bụ perspectiveuru ọzọ karịanone
Uru will-changenke transformma ọ bụperspective
Uru filterọzọ karịa nonema ọ bụ will-changeuru nke filter(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: relativena 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.

html

<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>