প্রসারিত লিঙ্ক

CSS এর মাধ্যমে একটি নেস্টেড লিঙ্ক "স্ট্রেচিং" করে যেকোনো HTML এলিমেন্ট বা বুটস্ট্র্যাপ কম্পোনেন্টকে ক্লিকযোগ্য করে তুলুন।

একটি ছদ্ম উপাদানের মাধ্যমে এটিতে থাকা ব্লকটিকে ক্লিকযোগ্য .stretched-linkকরতে একটি লিঙ্কে যুক্ত করুন ৷ বেশিরভাগ ক্ষেত্রে, এর মানে হল যে একটি উপাদান যার সাথে ক্লাসের সাথে একটি লিঙ্ক রয়েছে সেটি ক্লিকযোগ্য। অনুগ্রহ করে মনে রাখবেন কিভাবে CSS কাজ করে , বেশিরভাগ টেবিল উপাদানের সাথে মিশ্রিত করা যাবে না।::afterposition: relative;.stretched-linkposition.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="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>This is some placeholder content for the media object. 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: relativeডিফল্টরূপে থাকে, তাই ক্লিকযোগ্য কলামগুলির জন্য শুধুমাত্র .stretched-linkএকটি লিঙ্কে ক্লাস প্রয়োজন। যাইহোক, কলাম এবং সারিতে একটি সম্পূর্ণ লিঙ্ক প্রসারিত করা .rowপ্রয়োজন ।.position-static.position-relative

প্রসারিত লিঙ্ক সহ কলাম

এই অন্য কাস্টম উপাদানের জন্য স্থানধারক সামগ্রীর আরেকটি উদাহরণ। কিছু বাস্তব-বিশ্বের বিষয়বস্তু কেমন হবে তা অনুকরণ করার উদ্দেশ্যে এবং আমরা উপাদানটিকে কিছুটা শরীর এবং আকার দিতে এখানে এটি ব্যবহার করছি।

কোথাও যেতে

<div class="row no-gutters 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 position-static p-4 pl-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মানtransformperspective
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>