الفرق بين المراجعتين ل"Bootstrap/stretched-link"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: الروابط الممتدة Stretched link في إطار العمل Bootstrap}}</noinclude> استفد من رسائل التنبيه الم...')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الروابط الممتدة Stretched link في إطار العمل Bootstrap}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الروابط الممتدة Stretched link في إطار العمل Bootstrap}}</noinclude>
−
استفد من رسائل التنبيه المرنة التي يوفّرها إطار العمل Bootstrap لإظهار رسائل تغذيّة راجعة للإجراءات النمطيّة التي يقوم بها الزوّار.
+
اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "تمديد" رابط داخلي عبر CSS.
  
 +
أضف ‎.<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">
 +
<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>
 +
 +
 +
 +
 +
 +
</syntaxhighlight>كائنات الوسائط ليس لها الخاصية <code>position: relative</code> افتراضيا، لذلك نحتاج إلى إضافة <code>‎.position-relative</code> هنا لمنع الرابط من التمدد خارج كائن الوسائط.<syntaxhighlight lang="html">
 +
<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>
 +
 +
 +
 +
 +
</syntaxhighlight>
 +
 +
الأعمدة لها الخاصية <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">
 +
    <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>
 +
</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>  (تعمل على فايرفوكس فقط)
 +
<syntaxhighlight lang="html">
 +
<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;">لن يعمل الرابط الممتد هنا، بسبب إضافة because <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>
 +
 +
 +
 +
 +
</syntaxhighlight>
 
== مصادر ==
 
== مصادر ==
−
* [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap].
+
* [https://getbootstrap.com/docs/4.5/utilities/stretched-link/ صفحة stretched-link في توثيق Bootstrap].
 
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
 
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]

مراجعة 12:25، 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;">لن يعمل الرابط الممتد هنا، بسبب إضافة because <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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Bootstrap/stretched-link&oldid=29770"