پیوند کشیده شده
هر عنصر HTML یا مؤلفه Bootstrap را با «کشیدن» پیوند تودرتو از طریق CSS قابل کلیک کنید.
پیوند کشیده شده در بوت استرپمثال
به یک پیوند اضافه .stretched-link کنید تا بلوک حاوی آن از طریق یک ::afterعنصر شبه قابل کلیک باشد. در بیشتر موارد، این بدان معنی است که عنصری position: relative; که حاوی پیوندی با .stretched-link کلاس است، قابل کلیک است.
کارتها بهطور position: relative پیشفرض در Bootstrap وجود دارند، بنابراین در این حالت میتوانید با خیال راحت .stretched-link کلاس را بدون هیچ تغییر دیگری در HTML به پیوندی در کارت اضافه کنید.
پیوندهای متعدد و اهداف ضربه ای با پیوندهای کشیده توصیه نمی شوند. با این حال، برخی از سبک ها position و z-index سبک ها می توانند در صورت نیاز به این امر کمک کنند.
کارت با لینک کشیده
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
برو یه جایی<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../../assets/img/generic/1.jpg" 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 class="btn btn-primary stretched-link" href="#">Go somewhere</a>
</div>
</div>شناسایی بلوک حاوی
اگر به نظر می رسد پیوند کشیده شده کار نمی کند، احتمالاً بلوک حاوی دلیل است. ویژگی های CSS زیر یک عنصر را به بلوک حاوی تبدیل می کند:
positionارزشی غیر ازstatic- A
transformیاperspectiveمقداری غیر ازnone - مقدار یا
will-change_transformperspective filterمقداری غیر از یا مقدارnone( فقط در فایرفاکس کار می کند)will-changefilter
کارت با پیوندهای کشیده
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
پیوند کشیده در اینجا کار نخواهد کرد، زیرا position: relativeبه پیوند اضافه شده است
این پیوند کشیده فقط روی pتگ - پخش می شود، زیرا یک تبدیل به آن اعمال می شود.
<div class="card shadow-lg" style="width: 18rem;"><img class="card-img-top" src="../../assets/img/generic/2.jpg" alt="..." />
<div class="card-body">
<h6 class="card-title fs-3">Card with stretched links</h6>
<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 class="stretched-link text-info" href="#" style="position: relative;">Stretched link will not work here, because <code class="text-danger">position: relative</code> is added to the link</a></p>
<p class="card-text bg-body-tertiary" style="transform: rotate(0);">This <a class="text-warning stretched-link" href="#">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.</p>
</div>
</div>
