الفرق بين المراجعتين ل"Bootstrap/stretched-link"
اذهب إلى التنقل
اذهب إلى البحث
| سطر 2: | سطر 2: | ||
اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "تمديد" رابط داخلي عبر CSS. | اجعل أي عنصر HTML أو مكوّن Bootstrap قابلاً للنقر من خلال "تمديد" رابط داخلي عبر CSS. | ||
| − | أضف .<code>stretched-link</code> إلى أيّ رابط لجعل الكتلة التي تحتويه قابلة للنقر عبر العنصر الزائف <code>::after</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: relative</code> افتراضيا في Bootstrap، لذلك يمكنك إضافة الصنف <code>.stretched-link</code> إلى أيّ رابط في البطاقة دون الحاجة إلى أيّ تغييرات على HTML. | ||
| − | لا يوصى باستخدام عدة روابط ممتدة وأهداف نقر. إن كان ولا بد، فيمكنك استخدام | + | لا يوصى باستخدام عدة روابط ممتدة وأهداف نقر. إن كان ولا بد، فيمكنك استخدام <code>position</code> و <code>z-index</code> للمساعدة على تنسيق المحتوى.<syntaxhighlight lang="html"> |
<div class="card" style="width: 18rem;"> | <div class="card" style="width: 18rem;"> | ||
<img src="..." class="card-img-top" alt="..."> | <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"> | <div class="media position-relative"> | ||
<img src="..." class="mr-3" alt="..."> | <img src="..." class="mr-3" alt="..."> | ||
| سطر 35: | سطر 35: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | الأعمدة لها الخاصية <code>position: relative</code> افتراضيا، لذلك فالحصول على أعمدة قابلة للنقر لا يتطلب إلا إضافة الصنف <code> .stretched-link</code> على رابط. بالمقابل، فإنّ تمديد رابط على صف <code>.row</code> كامل يتطلب إضافة <code>.position-static</code> إلى العمود و <code>.position-relative</code> | + | الأعمدة لها الخاصية <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="row no-gutters bg-light position-relative"> | ||
<div class="col-md-6 mb-md-0 p-md-4"> | <div class="col-md-6 mb-md-0 p-md-4"> | ||
| سطر 48: | سطر 48: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | تحديد الكتلة الحاوية | + | == تحديد الكتلة الحاوية == |
| − | |||
إذا لم يعمل الرابط الممتد كما هو متوقع، فعلى الأرجح أنّ السبب هو الكتلة التي تحتويه. تذكّر أنّ خاصيات CSS التالية ستجعل عنصرًا ما كتلة حاوية: | إذا لم يعمل الرابط الممتد كما هو متوقع، فعلى الأرجح أنّ السبب هو الكتلة التي تحتويه. تذكّر أنّ خاصيات CSS التالية ستجعل عنصرًا ما كتلة حاوية: | ||
* أيّ قيمة للخاصية <code>position</code> خلا <code>static</code> | * أيّ قيمة للخاصية <code>position</code> خلا <code>static</code> | ||
* أيّ قيمة للخاصية <code>transform</code> أو <code>perspective</code> خلا <code>none</code> | * أيّ قيمة للخاصية <code>transform</code> أو <code>perspective</code> خلا <code>none</code> | ||
* في حال كانت قيمة <code>transform</code> أو <code>perspective</code> تساوي <code>will-change</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"> | <syntaxhighlight lang="html"> | ||
<div class="card" style="width: 18rem;"> | <div class="card" style="width: 18rem;"> | ||
| سطر 62: | سطر 61: | ||
<p class="card-text">مثال بسيط للبناء من عنوان البطاقة ومحتواها.</p> | <p class="card-text">مثال بسيط للبناء من عنوان البطاقة ومحتواها.</p> | ||
<p class="card-text"> | <p class="card-text"> | ||
| − | <a href="#" class="stretched-link text-danger" style="position: relative;">لن يعمل الرابط الممتد هنا، بسبب إضافة | + | <a href="#" class="stretched-link text-danger" style="position: relative;">لن يعمل الرابط الممتد هنا، بسبب إضافة <code>position: relative</code></a> |
</p> | </p> | ||
<p class="card-text bg-light" style="transform: rotate(0);"> | <p class="card-text bg-light" style="transform: rotate(0);"> | ||
مراجعة 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>