پیوند کشیده
هر عنصر HTML یا مؤلفه Bootstrap را با «کشیدن» پیوند تودرتو از طریق CSS قابل کلیک کنید.
به یک پیوند اضافه .stretched-link
کنید تا بلوک حاوی آن از طریق یک ::after
عنصر شبه قابل کلیک باشد. در بیشتر موارد، این بدان معنی است که عنصری position: relative;
که حاوی پیوندی با .stretched-link
کلاس است، قابل کلیک است. لطفاً توجه داشته باشید که CSS چگونه position
کار میکند ، .stretched-link
نمیتوان آن را با اکثر عناصر جدول ترکیب کرد.
کارتها بهطور position: relative
پیشفرض در Bootstrap وجود دارند، بنابراین در این حالت میتوانید با خیال راحت .stretched-link
کلاس را بدون هیچ تغییر دیگری در HTML به پیوندی در کارت اضافه کنید.
پیوندهای متعدد و اهداف ضربه ای با پیوندهای کشیده توصیه نمی شوند. با این حال، برخی از سبک ها position
و z-index
سبک ها می توانند در صورت نیاز به این امر کمک کنند.
کارت با لینک کشیده
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
برو یه جایی<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>
اکثر کامپوننتهای سفارشی بهطور position: relative
پیشفرض ندارند، بنابراین .position-relative
برای جلوگیری از کشیده شدن پیوند به خارج از عنصر والد، باید اینجا را اضافه کنیم.
جزء سفارشی با پیوند کشیده شده
این مقداری محتوای نگهدارنده برای مولفه سفارشی است. در نظر گرفته شده است که محتوای واقعی را تقلید کند، و ما از آن در اینجا برای دادن بدنه و اندازه به جزء استفاده می کنیم.
برو یه جایی<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>
ستون هایی با پیوند کشیده
نمونه دیگری از محتوای نگهدارنده مکان برای این مؤلفه سفارشی دیگر. در نظر گرفته شده است که محتوای واقعی را تقلید کند، و ما از آن در اینجا برای دادن بدنه و اندازه به جزء استفاده می کنیم.
برو یه جایی<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>
شناسایی بلوک حاوی
اگر به نظر می رسد پیوند کشیده شده کار نمی کند، احتمالاً بلوک حاوی دلیل است. ویژگی های CSS زیر یک عنصر را به بلوک حاوی تبدیل می کند:
position
ارزشی غیر ازstatic
- A
transform
یاperspective
مقداری غیر ازnone
- مقدار یا
will-change
_transform
perspective
filter
مقداری غیر از یا مقدارnone
( فقط در فایرفاکس کار می کند)will-change
filter
کارت با پیوندهای کشیده
چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
پیوند کشیده در اینجا کار نخواهد کرد، زیرا position: relative
به پیوند اضافه شده است
این پیوند کشیده فقط روی p
تگ - پخش می شود، زیرا یک تبدیل به آن اعمال می شود.
<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>