الفرق بين المراجعتين ل"Bootstrap/spinners"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:مكوِّن التنبيهات Alerts في إطار العمل Bootstrap}}</noinclude> استفد من رسائل التنبيه المرنة...')
 
ط
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE:مكوِّن التنبيهات Alerts في إطار العمل Bootstrap}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:مكوِّن دورات الانتظار spinners في إطار العمل Bootstrap}}</noinclude>
−
استفد من رسائل التنبيه المرنة التي يوفّرها إطار العمل Bootstrap لإظهار رسائل تغذيّة راجعة للإجراءات النمطيّة التي يقوم بها الزوّار.
+
وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوّارات الانتظار في Bootstrap، وهي مكوّنات مبنية بالكامل باستخدام [[HTML]] و [[CSS]]، ولا تستخدم [[JavaScript]].
  
−
== أمثلة ==
+
== نظرة عامة ==
−
تتوفّر التنبيهات Alerts بصيغة نصوص غير محدودة الطول، كما تتوفّر بصيغة أزرار تجاهل اختياريّة. استخدم واحدًا من أصناف السيّاق الثمانيّة '''الإجباريّة''' من أجل الحصول على تنسيق صحيح للتنبيهات (مثلًا للتنبيه على نجاح إجراء <code>‎.alert-success</code>). استخدم مُلحَق تنبيهات jQuery إنْ أردت توفير أزرار تجاهل سطريّة Inline.<syntaxhighlight lang="html">
+
يمكنك استخدَام دوارات الانتظار لإظهار حالة التحميل في صفحاتك. هذه الدوارات مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيْد أنّك قد تحتاج أحيانًا إلى استخدام بسيط لجافا سكربت لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة.
−
<div class="alert alert-primary" role="alert">
+
 
−
  هذا تنبيه أوّليّّ —تحقّق منه!
+
فيما يخص [[Bootstrap/accessibility|سهولة الوصول]]، يتوفّر كل مُحمِّل (loader) على خاصية <code>role="status"</code>‎ ووسم متشعّب ‪<code><nowiki><span class="sr-only">جار التحميل...‏</span></nowiki>‎</code>‎
 +
 
 +
== دوارات الانتظار الإطارية ==
 +
استخدم دوارات الانتظار الإطارية لعرض حالة التحميل عرضًا خفيفًا.<syntaxhighlight lang="html">
 +
<div class="spinner-border" role="status">
 +
  <span class="sr-only">... جار التحميل</span>
 +
</div>
 +
</syntaxhighlight>
 +
 
 +
== الألوان ==
 +
تستخدم الدوارات الإطارية <code>CurrentColor</code> لتلوين إطاراتها (<code>border-color</code>)، ممّا يعني أنه بمقدورك تخصيص اللون باستخدام [[Bootstrap/colors|أصناف تلوين النصوص]]، إذ يمكنك استخدام أيّ من أصناف تلوين النصوص القياسية على الدوارات.<syntaxhighlight lang="html">
 +
<div class="spinner-border text-primary" role="status">
 +
  <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-secondary" role="alert">
+
<div class="spinner-border text-secondary" role="status">
−
   هذا تنبيه ثانويّ —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-success" role="alert">
+
<div class="spinner-border text-success" role="status">
−
   هذا تنبيه على نجاح إجراء —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-danger" role="alert">
+
<div class="spinner-border text-danger" role="status">
−
   هذا تنبيه على خطر —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-warning" role="alert">
+
<div class="spinner-border text-warning" role="status">
−
  هذا تنبيه للاحتياط —تحقّق منه!
+
  <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-info" role="alert">
+
<div class="spinner-border text-info" role="status">
−
   هذا تنبيه لإعطاء معلومات —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-light" role="alert">
+
<div class="spinner-border text-light" role="status">
−
   هذا تنبيه خفيف —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-dark" role="alert">
+
<div class="spinner-border text-dark" role="status">
−
   هذا تنبيه غامق —تحقّق منه!
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
 +
</syntaxhighlight>
 +
 +
'''توضيح''': السبب في عدم استخدام الأصناف المساعدة <code>border-color</code>، هو أنّ الدوارات الإطارية تجعل واحدا من إطاراتها على الأقل شفافًا <code>transparent</code> في أحد الجوانب، ما يعني أنّ أصناف <code>‎.border-{color}</code>‎ ستتجاوز ذلك.
  
 +
== دوّارات الانتظار النامية Growing spinner ==
 +
إذا لم تشأ استخدام الدوارات الإطارية، فاستخدم بدلا منها  دوارات الانتظار النامية. هذه الدوارات لا تدور، إلا أنها تنمو تدريجيا وبتكرار.<syntaxhighlight lang="html">
 +
<div class="spinner-grow" role="status">
 +
  <span class="sr-only">... جار التحميل</span>
 +
</div>
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
==== توصيل المعنى إلى التقنيّات المساعدة ====
+
مثل الدوار السابق، يستخدم هذا الدوار  <code>CurrentColor</code>، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة.<syntaxhighlight lang="html">
−
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل  المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ  مخفيّ بالصّنف <code>‎.sr-only</code>.
+
<div class="spinner-grow text-primary" role="status">
−
 
+
  <span class="sr-only">... جار التحميل</span>
−
=== لون الرابط ===
 
−
استخدم الصّنف الخدمي<code>‎.alert-link</code> لتوفير روابط متماشية مع التنسيقات ضمن التنبيهات.<syntaxhighlight lang="html">
 
−
<div class="alert alert-primary" role="alert"> هذا تنبيه أوّليّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
 
 
</div>
 
</div>
−
<div class="alert alert-secondary" role="alert">
+
<div class="spinner-grow text-secondary" role="status">
−
   هذا تنبيه ثانويّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-success" role="alert">
+
<div class="spinner-grow text-success" role="status">
−
   هذا تنبيه على نجاح إجراء يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-danger" role="alert">
+
<div class="spinner-grow text-danger" role="status">
−
   هذا تنبيه على خطر يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-warning" role="alert">
+
<div class="spinner-grow text-warning" role="status">
−
   هذا تنبيه للاحتيّاط يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-info" role="alert">
+
<div class="spinner-grow text-info" role="status">
−
   هذا تنبيه لإعطاء ملعومات يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-light" role="alert">
+
<div class="spinner-grow text-light" role="status">
−
   هذا تنبيه خفيف يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
−
<div class="alert alert-dark" role="alert">
+
<div class="spinner-grow text-dark" role="status">
−
   هذا تنبيه غامق يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
=== عناصر HTML داخل التنبيهات ===
+
== المحاذاة ==
−
يمكن أن تحتوي التنبيهات على عناصر HTML مثل الترويسات، والفقرات والخطوط الفاصلة (<code>[[HTML/hr|<nowiki><hr></nowiki>]]</code>).<syntaxhighlight lang="html">
+
بُنيت دوارات الانتظار في Bootstrap باستخدام <code>rem</code> و <code>currentColor</code> و <code>display: inline-flex</code>. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة.
−
<div class="alert alert-success" role="alert">
+
 
−
   <h4 class="alert-heading">جيّد جدّا!</h4>
+
== الهوامش ==
−
  <p>لقد فعلتها، لقد قرأت هذه الرسالة التنبيهيّة المهمّة،  هذه. النصّ في هذا المثال طويل نوعًا مّا لترى كيف يعمل التباعد مع هذا النوع من المحتوى داخل التنبيهات</p>
+
استخدام [[Bootstrap/spacing|أدوات الهامش]] المعروفة، مثل <code>‎.m-5</code>، لتحديد مسافات التباعد.<syntaxhighlight lang="html">
−
  <hr>
+
<div class="spinner-border m-5" role="status">
−
  <p class="mb-0">استخدم أدوات الهوامش كلّ ما دعت الحاجة، حتى تبقى الأمور رائعةً ومُرتّبة</p>
+
   <span class="sr-only">... جار التحميل</span>
 
</div>
 
</div>
 +
</syntaxhighlight>
  
 +
== التموضع ==
 +
استخدم [[Bootstrap/flex|أدوات Flexbox]] أو [[Bootstrap/float|أدوات تعويم العناصر]] (float) أو [[Bootstrap/typography|أدوات محاذاة النصوص]] لوضع دوارات الانتظار في المكان الذي تريد بدقة.
 +
* دوارات الانتظار المرنة
 +
<syntaxhighlight lang="html">
 +
<div class="d-flex justify-content-center">
 +
  <div class="spinner-border" role="status">
 +
    <span class="sr-only">... جار التحميل</span>
 +
  </div>
 +
</div>
 +
</syntaxhighlight><syntaxhighlight lang="html">
  
 +
</div>
 +
<div class="d-flex align-items-center">
 +
  <strong>... جار التحميل</strong>
 +
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
 +
</div>
 +
</syntaxhighlight>
 +
* دوارات الانتظار العائمة
 +
<syntaxhighlight lang="html">
 +
<div class="clearfix">
 +
  <div class="spinner-border float-right" role="status">
 +
    <span class="sr-only">... جار التحميل</span>
 +
  </div>
 +
</div>
 +
</syntaxhighlight>
 +
* محاذاة النص
 +
<syntaxhighlight lang="html">
 +
<div class="text-center">
 +
  <div class="spinner-border" role="status">
 +
    <span class="sr-only">... جار التحميل</span>
 +
  </div>
 +
</div>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
=== تجاهل التنبيهات ===
+
== القياسات ==
−
يمكن باستخدام مُلحَق JavaScript الخاصّ بالتنبيهات إضافة أزرار تجاهل على نفس السّطر:
+
يمكنك تصغير دوارات الانتظار أو تكبيرها عبر إضافة الصنف <code>‎.spinner-border-sm</code> أو <code>‎.spinner-grow-sm</code>.<syntaxhighlight lang="html">
−
* تأكّد من تحميل مُلحَق التنبيهات، أو النسخة المُجمَّعة من JavaScript الخاصّة بإطار العمل Bootstrap.
+
<div class="spinner-border spinner-border-sm" role="status">
−
* إن كنت تُجمِّع JavaScript بنفسك من المصدر فانتبه إلى أنّ المُلحَق يحتاج إلى [[Bootstrap/javascript#Util|الملفّ Util]]. هذا الملفّ مُضمَّن في النسخة المُجمَّعة.
+
   <span class="sr-only">... جار التحميل</span>
−
* أضف زرّ تجاهل والصّنف ‎<code>.alert-dismissible</code> الذي يضيف حاشية إضافيّة إلى اليمين ويحدّد موضع الزرّ <code>‎.close</code> .
+
</div>
−
* أضف الخاصيّة <code>‎data-dismiss="alert"‎</code> إلى زرّ التجاهل الذي يفعّل الوظيفة في JavaScript. تأكّد من استخدام العنصُر <code>[[HTML/button|<button>]]</code> لتطبيق زرّ التجاهل من أجل الحصول على سلوك مناسب على جميع الأجهزة.
+
<div class="spinner-grow spinner-grow-sm" role="status">
−
* تأكّد من إضافة الصّنفيْن  <code>‎.fade</code> و <code>‎.show</code> إلى التنبيه لإضافة تأثيرات عليه بعد النقر على زرّ التجاهل.
+
  <span class="sr-only">... جار التحميل</span>
−
جرّب المثال التالي:<syntaxhighlight lang="html">
 
−
<div class="alert alert-warning alert-dismissible fade show" role="alert">
 
−
   <strong>انتبه!</strong> يجب أن تتحقّق من بعضٍ من الحقول الموجودة في الأسفل.
 
−
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 
−
    <span aria-hidden="true">&times;</span>
 
−
  </button>
 
 
</div>
 
</div>
 +
</syntaxhighlight>
  
−
 
+
يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد دوار الانتظار حسب الحاجة.<syntaxhighlight lang="html">
 +
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
 +
  <span class="sr-only">... جار التحميل</span>
 +
</div>
 +
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
 +
  <span class="sr-only">... جار التحميل</span>
 +
</div>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
== سلوك JavaScript ==
+
== الأزرار ==
−
 
+
استخدم دوارات الانتظار داخل الأزرار للإشارة إلى أنّ إجراءً ما قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوّار بدله إن شئت.<syntaxhighlight lang="html">
−
=== المُنشِّطات Triggers ===
+
<button class="btn btn-primary" type="button" disabled>
−
يمكن تفعيل إمكانيّة تجاهل تنبيه بواسطة JavaScript:<syntaxhighlight lang="javascript">
+
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
−
$('.alert').alert()
+
  <span class="sr-only">... جار التحميل</span>
−
</syntaxhighlight>كما يمكن استخدام خاصيّات <code>data</code> على زرّ '''داخل التنبيه''' كما في المثال الأخير ضمن فقرة التجاهل:<syntaxhighlight lang="html">
+
</button>
−
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+
<button class="btn btn-primary" type="button" disabled>
−
   <span aria-hidden="true">&times;</span>
+
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 +
  ... جار التحميل
 +
</button>
 +
</syntaxhighlight><syntaxhighlight lang="html">
 +
<button class="btn btn-primary" type="button" disabled>
 +
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 +
  <span class="sr-only">... جار التحميل</span>
 +
</button>
 +
<button class="btn btn-primary" type="button" disabled>
 +
   <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
 +
  ... جار التحميل
 
</button>
 
</button>
−
</syntaxhighlight>انتبه إلى أنّ إغلاق تنبيه يحذفه من كائن المستند DOM.
 
−
 
−
=== التوابع ===
 
−
{| class="wikitable"
 
−
!التابع
 
−
!الوصف
 
−
|-
 
−
|<code>‎$().alert()‎</code>
 
−
|يجعل التنبيه يُنصِت لأحداث النقر على العناصر الأبناء التي لديها الخاصيّة <code>data-dismiss="alert"</code> . (ليس ضروريًّا عند استخدام التمهيد التلقائي Auto-initialization في واجهة التطبيقات data-api.)
 
−
|-
 
−
|<code>‎$().alert('close')</code>
 
−
|يغلق تنبيهًا بحذف من كائن المستنَد DOM. إن كان الصّنفان ‎<code>.fade</code> و <code>‎.show</code> موجوديْن فإن التنبيه سيخبو قبل أن يختفي.
 
−
|-
 
−
|<code>‎$().alert('dispose')</code>
 
−
|يحذف التنبيه من العنصُر.
 
−
|}
 
−
<syntaxhighlight lang="javascript">
 
−
$(".alert").alert('close')
 
−
</syntaxhighlight>
 
−
 
−
=== الأحداث Events ===
 
−
يعرض مُلحَق التنبيهات في Bootstrap بضعة أحداث للتعامل مع وظيفة التنبيه.
 
−
 
−
{| class="wikitable"
 
−
!الحدث
 
−
!الوصف
 
−
|-
 
−
|<code>close.bs.alert</code>
 
−
|ينطلق هذا الحدث مباشرةً بعد استدعاء التابع <code>close</code> .
 
−
|-
 
−
|<code>closed.bs.alert</code>
 
−
|ينطلق هذا الحدث مباشرةً بعد استدعاء التابع <code>close</code> .
 
−
|}
 
−
<syntaxhighlight lang="javascript">
 
−
$('#myAlert').on('closed.bs.alert', function () {
 
−
  // افعل شيئًا هنا …
 
−
})
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== مصادر ==
 
== مصادر ==
−
* [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap].
+
* [https://getbootstrap.com/docs/4.5/components/spinners/ صفحة spinners في توثيق Bootstrap].
 
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
 
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
−
[[spinners|{{SUBPAGENAME}}]]
+
[[تصنيف:Bootstrap components|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 09:37، 21 يوليو 2020

وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوّارات الانتظار في Bootstrap، وهي مكوّنات مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript.

نظرة عامة

يمكنك استخدَام دوارات الانتظار لإظهار حالة التحميل في صفحاتك. هذه الدوارات مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيْد أنّك قد تحتاج أحيانًا إلى استخدام بسيط لجافا سكربت لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة.

فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على خاصية role="status"‎ ووسم متشعّب ‪<span class="sr-only">جار التحميل...‏</span>‎‎

دوارات الانتظار الإطارية

استخدم دوارات الانتظار الإطارية لعرض حالة التحميل عرضًا خفيفًا.

<div class="spinner-border" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

الألوان

تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها (border-color)، ممّا يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص، إذ يمكنك استخدام أيّ من أصناف تلوين النصوص القياسية على الدوارات.

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

توضيح: السبب في عدم استخدام الأصناف المساعدة border-color، هو أنّ الدوارات الإطارية تجعل واحدا من إطاراتها على الأقل شفافًا transparent في أحد الجوانب، ما يعني أنّ أصناف ‎.border-{color}‎ ستتجاوز ذلك.

دوّارات الانتظار النامية Growing spinner

إذا لم تشأ استخدام الدوارات الإطارية، فاستخدم بدلا منها  دوارات الانتظار النامية. هذه الدوارات لا تدور، إلا أنها تنمو تدريجيا وبتكرار.

<div class="spinner-grow" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

مثل الدوار السابق، يستخدم هذا الدوار  CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة.

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

المحاذاة

بُنيت دوارات الانتظار في Bootstrap باستخدام rem و currentColor و display: inline-flex. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة.

الهوامش

استخدام أدوات الهامش المعروفة، مثل ‎.m-5، لتحديد مسافات التباعد.

<div class="spinner-border m-5" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

التموضع

استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع دوارات الانتظار في المكان الذي تريد بدقة.

  • دوارات الانتظار المرنة
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>

</div>
<div class="d-flex align-items-center">
  <strong>... جار التحميل</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
  • دوارات الانتظار العائمة
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>
  • محاذاة النص
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>

القياسات

يمكنك تصغير دوارات الانتظار أو تكبيرها عبر إضافة الصنف ‎.spinner-border-sm أو ‎.spinner-grow-sm.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد دوار الانتظار حسب الحاجة.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

الأزرار

استخدم دوارات الانتظار داخل الأزرار للإشارة إلى أنّ إجراءً ما قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوّار بدله إن شئت.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">... جار التحميل</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  ... جار التحميل
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">... جار التحميل</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  ... جار التحميل
</button>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Bootstrap/spinners&oldid=29784"