الفرق بين المراجعتين لصفحة: «Bootstrap/stretched-link»

المراجعة الحالية بتاريخ 09:39، 21 يوليو 2020

اجعل أي عنصر 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 src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">بطاقة ذات روابط ممتدة</h5>
    <p class="card-text">مثال بسيط للبناء على عنوان البطاقة ومحتواها.</p>
    <a href="#" class="btn btn-primary stretched-link">اذهب لمكان ما</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">كائن وسائط ذو روابط ممتدة</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">اذهب إلى مكان ما</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">أعمدة ذات روابط ممتدة</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">اذهب إلى مكان ما</a>
  </div>
</div>

تحديد الكتلة الحاوية

إذا لم يعمل الرابط الممتد كما هو متوقع، فعلى الأرجح أنّ السبب هو الكتلة التي تحتويه. تذكّر أنّ خاصيات CSS التالية ستجعل عنصرًا ما كتلة حاوية:

أيّ قيمة للخاصية position خلا static
أيّ قيمة للخاصية transform أو perspective خلا none
في حال كانت قيمة transform أو perspective تساوي will-change
أيّ قيمة للخاصية filter خلا none، أو في حال تمرير القيمة will-change للخاصية filter (تعمل على فايرفوكس فقط)

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">بطاقة ذات روابط ممتدة</h5>
    <p class="card-text">مثال بسيط للبناء من عنوان البطاقة ومحتواها.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">لن يعمل الرابط الممتد هنا، بسبب إضافة <code>position: relative</code></a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      لن يمتد هذا  <a href="#" class="text-warning stretched-link">الرابط الممتد</a> إلا على <code>p</code>-tag, ذلك أنّ تحويلا قد طُبٍّق عليه.
    </p>
  </div>
</div>

مصادر

صفحة stretched-link في توثيق Bootstrap.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE: الروابط الممتدة Stretched link في إطار العمل Bootstrap}}</noinclude>
-اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "تمديد" رابط داخلي عبر CSS.
+اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "توسيع" ذلك العنصر وإضافة رابط داخلي عبر CSS.
 أضف ‎.<code>stretched-link</code> إلى أيّ رابط لجعل الكتلة التي تحتويه قابلة للنقر عبر العنصر الزائف <code>‎::after</code>.  ينتج عن هذا غالبًا جعل عنصر ذا خاصية <code>position: relative</code>  ويحتوي رابطا ذا صنف <code>‎.stretched-link</code> قابلا للنقر.
@@ سطر 35: / سطر 35: @@
 </syntaxhighlight>
-الأعمدة لها الخاصية <code>position: relative</code> افتراضيا، لذلك فالحصول على أعمدة قابلة للنقر لا يتطلب إلا إضافة الصنف <code>‎ .stretched-link</code> على رابط. بالمقابل، فإنّ تمديد رابط على صف <code>‎.row</code> كامل يتطلب  إضافة <code>‎.position-static</code> إلى العمود و <code>‎.position-relative</code> إلى الصف.<syntaxhighlight lang="html">
+الأعمدة لها الخاصية <code>position: relative</code> افتراضيا، لذلك فالحصول على أعمدة قابلة للنقر لا يتطلب إلا إضافة الصنف <code>‎.stretched-link</code> على رابط. بالمقابل، فإنّ تمديد رابط على صف <code>‎.row</code> كامل يتطلب  إضافة <code>‎.position-static</code> إلى العمود و <code>‎.position-relative</code> إلى الصف.<syntaxhighlight lang="html">
 <div class="row no-gutters bg-light position-relative">
    <div class="col-md-6 mb-md-0 p-md-4">
@@ سطر 53: / سطر 53: @@
 * أيّ قيمة للخاصية <code>transform</code> أو <code>perspective</code> خلا <code>none</code>
 * في حال كانت قيمة <code>transform</code> أو <code>perspective</code> تساوي <code>will-change</code>
-* أيّ قيمة للخاصية  <code>filter</code>  خلا <code>none</code>، أو في حال تمرير القيمة <code>will-change</code> للخاصية <code>filter</code>  (تعمل على فايرفوكس فقط)
+* أيّ قيمة للخاصية <code>filter</code> خلا <code>none</code>، أو في حال تمرير القيمة <code>will-change</code> للخاصية <code>filter</code>  (تعمل على فايرفوكس فقط)
 <syntaxhighlight lang="html">
 <div class="card" style="width: 18rem;">
@@ سطر 76: / سطر 76: @@
 * [https://getbootstrap.com/docs/4.5/utilities/stretched-link/ صفحة stretched-link في توثيق Bootstrap].
 [[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
+[[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]]