رابط ممتد
اجعل أي عنصر HTML أو مكون Bootstrap قابلاً للنقر عن طريق "تمديد" رابط متداخل عبر CSS.
أضف .stretched-link
إلى رابط لجعل الكتلة التي تحتوي عليها قابلة للنقر عبر ::after
عنصر زائف. في معظم الحالات ، يعني هذا أن العنصر position: relative;
الذي يحتوي على ارتباط .stretched-link
بالفئة قابل للنقر عليه. يرجى ملاحظة أنه بالنظر إلى كيفية عمل CSSposition
، .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="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
- أ
transform
أوperspective
قيمة أخرى غيرnone
- قيمة أو
will-change
_transform
perspective
- قيمة
filter
بخلافnone
أوwill-change
قيمةfilter
(تعمل فقط على Firefox)
بطاقة مع وصلات ممتدة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
لن يعمل الرابط الممتد هنا ، لأنه 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>