الفرق بين المراجعتين ل"Bootstrap/popovers"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:العناصر المنبثقة Popovers في إطار العمل Bootstrap}}</noinclude> تصنيف:Bootstrapتصنيف:Bootstrap compon...') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:العناصر المنبثقة Popovers في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:العناصر المنبثقة Popovers في إطار العمل Bootstrap}}</noinclude> | ||
| + | استخدم العناصر المنبثقّة Popovers التي يوفّرها إطار العمل Bootstrap لإضافة تنسيقات وتأثيرات مماثلة لتلك الموجودة في iOS إلى صفحات ويب. | ||
| + | == نظرة عامّة == | ||
| + | في ما يلي أمور ينبغي إدراكها قبل البدء في استخدام مكوِّن العناصر المنبثقة الذي يوفّره Bootstrap: | ||
| + | * تعتمد العناصر المنبثقة على مكتبة [https://popper.js.org Popper.js] في تموضعها. لذا يجب - من أجل أن تعمل هذه العناصر - تضمين [https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js popper.min.js] قبل <code>bootstrap.js</code> أو استخدام <code>bootstrap.bundle.min.js</code> أو <code>bootstrap.bundle.js</code> الذين يتضمّنان Popper.js. | ||
| + | * تعتمد العناصر المنبثقة على مُلحَق التلميحات. | ||
| + | * انتبه إنْ كنت تبني JavaScript من الملفّات المصدريّة لإطار العمل Bootstrap إلى أنّه يتطلّب [[Bootstrap/javascript#Util |الملف <code>util.js</code>]] | ||
| + | * العناصر المنبثقة اختيّاريّة - لأسباب تتعلّق بالأداء، و'''يجب بالتالي تمهيدها يدويّا'''. | ||
| + | * لا تظهر عناصر منبثقة أبدًا في قيم <code>title</code> و<code>content</code> الفارغة. | ||
| + | * حدّد القيمة <code>container: 'body'</code> لتجنّب مشاكل في العرض في المكوِّنات الأكثر تعقيدًا (مثل مجموعات الإدخال، مجموعات الأزرار، ...إلخ). | ||
| + | * لن تعمل العناصر المنبثقة على العناصر المخفيّة. | ||
| + | * يجب ابتداء العناصر المنبثقة على العنصُر المُغلِّف عند استهداف عناصر تطبِّق الخاصيّة <code>disabled</code> أو الصنف <code>.disabled</code>. | ||
| + | * تتوسّط العناصر المنبثقة عند ابتدائها من روابط تلتفّ على أسطر متعدّدة تتوسّط العرض الكامل للرابط. استخدم الخاصيّة <code>white-space: nowrap;</code> على الرابط <code><a></code> لتفادي هذا الأمر. | ||
| + | * يجب إخفاء العناصر المنبثقة حتى يتسنّى حذفُ العناصر المتعلّقة بها من كائن المستند DOM. | ||
| + | |||
| + | واصل القراءة لأمثلة عن كيفيّة عمل العناصر المنبثقة. | ||
| + | |||
[[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | ||
مراجعة 20:51، 11 أبريل 2018
استخدم العناصر المنبثقّة Popovers التي يوفّرها إطار العمل Bootstrap لإضافة تنسيقات وتأثيرات مماثلة لتلك الموجودة في iOS إلى صفحات ويب.
نظرة عامّة
في ما يلي أمور ينبغي إدراكها قبل البدء في استخدام مكوِّن العناصر المنبثقة الذي يوفّره Bootstrap:
- تعتمد العناصر المنبثقة على مكتبة Popper.js في تموضعها. لذا يجب - من أجل أن تعمل هذه العناصر - تضمين popper.min.js قبل
bootstrap.jsأو استخدامbootstrap.bundle.min.jsأوbootstrap.bundle.jsالذين يتضمّنان Popper.js. - تعتمد العناصر المنبثقة على مُلحَق التلميحات.
- انتبه إنْ كنت تبني JavaScript من الملفّات المصدريّة لإطار العمل Bootstrap إلى أنّه يتطلّب الملف
util.js - العناصر المنبثقة اختيّاريّة - لأسباب تتعلّق بالأداء، ويجب بالتالي تمهيدها يدويّا.
- لا تظهر عناصر منبثقة أبدًا في قيم
titleوcontentالفارغة. - حدّد القيمة
container: 'body'لتجنّب مشاكل في العرض في المكوِّنات الأكثر تعقيدًا (مثل مجموعات الإدخال، مجموعات الأزرار، ...إلخ). - لن تعمل العناصر المنبثقة على العناصر المخفيّة.
- يجب ابتداء العناصر المنبثقة على العنصُر المُغلِّف عند استهداف عناصر تطبِّق الخاصيّة
disabledأو الصنف.disabled. - تتوسّط العناصر المنبثقة عند ابتدائها من روابط تلتفّ على أسطر متعدّدة تتوسّط العرض الكامل للرابط. استخدم الخاصيّة
white-space: nowrap;على الرابط<a>لتفادي هذا الأمر. - يجب إخفاء العناصر المنبثقة حتى يتسنّى حذفُ العناصر المتعلّقة بها من كائن المستند DOM.
واصل القراءة لأمثلة عن كيفيّة عمل العناصر المنبثقة.