ڳنڍيل ڳنڍ
ڪنهن به HTML عنصر يا بوٽ اسٽريپ جزو کي CSS ذريعي "stretching" ذريعي ڪلڪ ڪيو وڃي.
.stretched-link
ھڪڙي لنڪ ۾ شامل ڪريو ان تي مشتمل بلاڪ کي ڪلڪ ڪرڻ جي قابل بنائڻ لاءِ هڪ ::after
pseudo عنصر ذريعي. اڪثر ڪيسن ۾، هن جو مطلب آهي ته هڪ عنصر جنهن سان گڏ position: relative;
هڪ لنڪ شامل آهي .stretched-link
ڪلاس سان ڪلڪ ڪري سگهجي ٿو. مھرباني ڪري نوٽ ڪريو ته CSS ڪيئن position
ڪم ڪري ٿو ، .stretched-link
گھڻن ٽيبل عناصر سان ملائي نٿو سگھجي.
بوٽ اسٽريپ ۾ ڪارڊ position: relative
ڊفالٽ طور تي آهن، تنهنڪري هن صورت ۾ توهان محفوظ طور تي .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>
شامل بلاڪ جي سڃاڻپ
جيڪڏهن وڌايل لنڪ ڪم ڪرڻ نه لڳي، ته بلاڪ تي مشتمل شايد ان جو سبب هوندو. هيٺ ڏنل سي ايس ايس جا خاصيتون هڪ عنصر ٺاهيندا جنهن ۾ بلاڪ شامل آهن:
- هڪ
position
قدر کان سواءِstatic
- A
transform
ياperspective
قدر کان سواءِnone
- يا جو
will-change
قدرtransform
perspective
- هڪ
filter
قدر کان سواءِnone
يا هڪwill-change
قدرfilter
(صرف فائر فاڪس تي ڪم ڪندو آهي)
وڌايل لنڪ سان ڪارڊ
ڪارڊ جي عنوان تي تعمير ڪرڻ ۽ ڪارڊ جي مواد جو وڏو حصو ٺاهڻ لاء ڪجهه تڪڙو مثال ٽيڪسٽ.
وڌايل لنڪ هتي ڪم نه ڪندي، ڇاڪاڻ ته position: relative
لنڪ ۾ شامل ڪيو ويو آهي
هي وڌايل لنڪ صرف p
-tag تي پکڙيل هوندو، ڇاڪاڻ ته ان تي هڪ ٽرانسفارم لاڳو ڪيو ويندو آهي.
<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>