الفرق بين المراجعتين ل"Bootstrap/spinners"
اذهب إلى التنقل
اذهب إلى البحث
| سطر 1: | سطر 1: | ||
| − | <noinclude>{{DISPLAYTITLE:مكوِّن | + | <noinclude>{{DISPLAYTITLE:مكوِّن دورات الانتظار spinners في إطار العمل Bootstrap}}</noinclude> |
| − | + | وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوارات Bootstrap، وهي مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript. | |
| − | == | + | == نظرة عامة == |
| − | + | يمكن استخدام دوارات Bootstrap لإظهار حالة التحميل في صفحاتك. وهي مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيد أنّك قد تحتاج إلى استخدام بسيط لجافا سكربت لتبديل لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على سمة role="status" ووسما متشعبا <nowiki><span class="sr-only">جار التحميل...</span></nowiki>. | ||
| − | + | إطارات الدوارات | |
| − | + | استخدم إطارات الدوارات لعرض حالة التحميل عرضًا خفيفًا. | |
| − | |||
| − | + | الألوان | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها، مما يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص. يمكنك استخدام أي من أصناف تلوين النصوص على الدوارات القياسية. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | ما المانع من استخدام أصناف لون الإطارات border-color؟ تجعل الدوارات الإطارية واحدا من إطاراته على الأقل شفافًا في أحد الجوانب، ما يعني أنّ أصناف.border-{color} ستتجاوز ذلك. | ||
| − | + | الدوارات النامية | |
| − | + | إذا لم تشأ استخدام الدوار الإطارية، فاستخدم بدلا منها الدوارات النامية. صحيح أنّها لا تدور، إلا أنها تنمو تدريجيا وبتكرار. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | مثل الدوار السابق، يستخدم هذا الدوار CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة. | ||
| − | + | المحاذاة | |
| − | + | بُنيت الدوارات في Bootstrap باستخدام rems و currentColor و display: inline-flex. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة. | |
| − | + | الهوامش | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | استخدام أدوات الهامش المعروفة، مثل .m-5، لتحديد مسافات التباعد. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | التموضع | |
| − | |||
| − | + | استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع الدوارات في المكان الذي تريد بدقة. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | الدوارات المرنة | |
| + | |||
| + | عربات | ||
| + | |||
| + | محاذاة النص | ||
| + | |||
| + | الحجم | ||
| + | |||
| + | يمكنك تصغير الدوارات أو تكبيرها عبر إضافة الصنف .spinner-border-sm أو .spinner-grow-sm . | ||
| + | |||
| + | يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد الدوار حسب الحاجة. | ||
| + | |||
| + | الأزرار | ||
| + | |||
| + | استخدم الدوارات داخل الأزرار للإشارة إلى أنّ إجراء الزر قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوار بدله إن شئت. | ||
* [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap]. | * [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
مراجعة 08:44، 19 يوليو 2020
وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوارات Bootstrap، وهي مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript.
نظرة عامة
يمكن استخدام دوارات Bootstrap لإظهار حالة التحميل في صفحاتك. وهي مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيد أنّك قد تحتاج إلى استخدام بسيط لجافا سكربت لتبديل لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة.
فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على سمة role="status" ووسما متشعبا <span class="sr-only">جار التحميل...</span>.
إطارات الدوارات
استخدم إطارات الدوارات لعرض حالة التحميل عرضًا خفيفًا.
الألوان
تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها، مما يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص. يمكنك استخدام أي من أصناف تلوين النصوص على الدوارات القياسية.
ما المانع من استخدام أصناف لون الإطارات border-color؟ تجعل الدوارات الإطارية واحدا من إطاراته على الأقل شفافًا في أحد الجوانب، ما يعني أنّ أصناف.border-{color} ستتجاوز ذلك.
الدوارات النامية
إذا لم تشأ استخدام الدوار الإطارية، فاستخدم بدلا منها الدوارات النامية. صحيح أنّها لا تدور، إلا أنها تنمو تدريجيا وبتكرار.
مثل الدوار السابق، يستخدم هذا الدوار CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة.
المحاذاة
بُنيت الدوارات في Bootstrap باستخدام rems و currentColor و display: inline-flex. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة.
الهوامش
استخدام أدوات الهامش المعروفة، مثل .m-5، لتحديد مسافات التباعد.
التموضع
استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع الدوارات في المكان الذي تريد بدقة.
الدوارات المرنة
عربات
محاذاة النص
الحجم
يمكنك تصغير الدوارات أو تكبيرها عبر إضافة الصنف .spinner-border-sm أو .spinner-grow-sm .
يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد الدوار حسب الحاجة.
الأزرار
استخدم الدوارات داخل الأزرار للإشارة إلى أنّ إجراء الزر قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوار بدله إن شئت.