Link dowo
Nggawe unsur HTML utawa komponen Bootstrap sing bisa diklik kanthi "mulet" link bersarang liwat CSS.
Tambah .stretched-link
menyang link kanggo nggawe blok sing ngemot bisa diklik liwat ::after
unsur pseudo. Umume kasus, iki tegese unsur position: relative;
sing ngemot link karo .stretched-link
kelas bisa diklik. Wigati dimangerteni kepiye cara kerja CSSposition
, .stretched-link
ora bisa dicampur karo akeh unsur tabel.
Kertu duwe position: relative
standar ing Bootstrap, supaya ing kasus iki sampeyan bisa kanthi aman nambah .stretched-link
kelas menyang link ing kertu tanpa owah-owahan HTML liyane.
Tautan pirang-pirang lan target tunyuk ora disaranake nganggo tautan sing dawa. Nanging, sawetara position
lan z-index
gaya bisa mbantu yen dibutuhake.
Kertu kanthi tautan sing dawa
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Menyang ngendi wae<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>
Umume komponen khusus ora duwe position: relative
standar, mula kita kudu nambah ing .position-relative
kene kanggo nyegah link saka njaba unsur induk.
Komponen khusus kanthi tautan sing dawa
Iki minangka sawetara isi placeholder kanggo komponen khusus. Iku dimaksudaké kanggo niru apa sawetara isi donya nyata bakal katon kaya, lan kita nggunakake kene kanggo menehi komponen dicokot saka awak lan ukuran.
Menyang ngendi wae<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>
Kolom kanthi tautan sing dawa
Conto liyane isi placeholder kanggo komponen khusus liyane iki. Iku dimaksudaké kanggo niru apa sawetara isi donya nyata bakal katon kaya, lan kita nggunakake kene kanggo menehi komponen dicokot saka awak lan ukuran.
Menyang ngendi wae<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>
Ngenali blok sing ngemot
Yen link sing diwutahake ora bisa digunakake, blok sing ana bisa uga dadi sababe. Properti CSS ing ngisor iki bakal nggawe unsur minangka blok sing ngemot:
- Nilai
position
liyane sakastatic
- A
transform
utawaperspective
Nilai liyane sakanone
- Nilai
will-change
sakatransform
utawaperspective
- Nilai
filter
liyane sakanone
utawawill-change
nilaifilter
(mung dianggo ing Firefox)
Kertu karo pranala dowo
Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.
Link dowo ora bakal bisa ing kene, amarga position: relative
ditambahake menyang link
Link dowo iki mung bakal nyebar liwat p
-tag, amarga transformasi ditrapake kanggo.
<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>