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

مراجعة 12:28، 19 يوليو 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.

@@ سطر 2: / سطر 2: @@
 اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "تمديد" رابط داخلي عبر CSS.
-أضف ‎.<code>stretched-link</code> إلى أيّ رابط لجعل الكتلة التي تحتويه قابلة للنقر عبر العنصر الزائف <code>‎::after</code>.  يعني في أكثر الحالات جعل عنصر ذا خاصية <code>position: relative</code>  ويحتوي رابطا ذا صنف <code>‎.stretched-link</code> قابلا للنقر.
+أضف ‎.<code>stretched-link</code> إلى أيّ رابط لجعل الكتلة التي تحتويه قابلة للنقر عبر العنصر الزائف <code>‎::after</code>.  ينتج عن هذا غالبًا جعل عنصر ذا خاصية <code>position: relative</code>  ويحتوي رابطا ذا صنف <code>‎.stretched-link</code> قابلا للنقر.
 البطاقات لها الخاصية <code>position: relative</code> افتراضيا في Bootstrap، لذلك يمكنك إضافة الصنف <code>‎.stretched-link</code> إلى أيّ رابط في البطاقة دون الحاجة إلى أيّ تغييرات على HTML.
-لا يوصى باستخدام عدة روابط ممتدة وأهداف نقر. إن كان ولا بد، فيمكنك استخدام أنماط <code>position</code> و <code>z-index</code> للمساعدة على تنسيق المحتوى.<syntaxhighlight lang="html">
+لا يوصى باستخدام عدة روابط ممتدة وأهداف نقر. إن كان ولا بد، فيمكنك استخدام <code>position</code> و <code>z-index</code> للمساعدة على تنسيق المحتوى.<syntaxhighlight lang="html">
 <div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
@@ سطر 20: / سطر 20: @@
-</syntaxhighlight>كائنات الوسائط ليس لها الخاصية <code>position: relative</code> افتراضيا، لذلك نحتاج إلى إضافة <code>‎.position-relative</code> هنا لمنع الرابط من التمدد خارج كائن الوسائط.<syntaxhighlight lang="html">
+</syntaxhighlight>[[Bootstrap/media object|كائنات الوسائط]] ليس لها الخاصية <code>position: relative</code> افتراضيا، لذلك نحتاج إلى إضافة <code>‎.position-relative</code> هنا لمنع الرابط من التمدد خارج كائن الوسائط.<syntaxhighlight lang="html">
 <div class="media position-relative">
    <img src="..." class="mr-3" alt="...">
@@ سطر 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">
@@ سطر 48: / سطر 48: @@
 </syntaxhighlight>
-تحديد الكتلة الحاوية
+== تحديد الكتلة الحاوية ==
 إذا لم يعمل الرابط الممتد كما هو متوقع، فعلى الأرجح أنّ السبب هو الكتلة التي تحتويه. تذكّر أنّ خاصيات CSS التالية ستجعل عنصرًا ما كتلة حاوية:
 * أيّ قيمة للخاصية <code>position</code> خلا <code>static</code>
 * أيّ قيمة للخاصية <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;">
@@ سطر 62: / سطر 61: @@
      <p class="card-text">مثال بسيط للبناء من عنوان البطاقة ومحتواها.</p>
      <p class="card-text">
-       <a href="#" class="stretched-link text-danger" style="position: relative;">لن يعمل الرابط الممتد هنا، بسبب إضافة because <code>position: relative</code></a>
+       <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);">