في هذا الدرس 5تصفّح المواضيع
عندما يفتح المستخدم لوحة تحكم أو متجراً إلكترونياً يعتمد على جلب البيانات عبر الشبكة، فإن ترك المساحة بيضاء فارغة ثم إظهار البطاقات فجأة يؤدي إلى اهتزاز الصفحة وقفز العناصر تحت أصابع الزائر. يعالج Bootstrap 5 هذه المشكلة جذرياً عبر مكوّن العناصر النائبة .placeholder المبني بالكامل بلغة CSS دون الحاجة لأي كود JavaScript إضافي.
يرسم الكلاس .placeholder أشرطة مستطيلة تحاكي شكل العناوين والفقرات والأزرار في موضعها الفعلي ريثما تكتمل الاستجابة، ويُطبَّق عادةً على عناصر <span> داخل الفقرات مع إخفائها عن قارئات الشاشة عبر السمة aria-hidden="true".
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a class="btn btn-primary disabled placeholder col-4"
aria-disabled="true"></a>يأخذ العنصر الحامل لكلاس .placeholder عرض 100% من أبيه إن كان عنصراً كتلياً، أو يحتاج إلى تحديد عرض صريح إن كان عنصر <span> سطرياً. يوفر لك بوتستراب طريقتين مرنتين لضبط أطوال الأسطر النائبة بحيث تبدو طبيعية كفقرة حقيقية: إما عبر كلاسات أعمدة الشبكة المنفردة مثل .col-6 و.col-8، وإما عبر أدوات نسب العرض المساعدة مثل .w-75 و.w-50.
<div aria-hidden="true">
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder w-50"></span>
</div>يمكنك تمييز مستويات الأهمية داخل هيكل التحميل عبر تغيير لون الشريط وسماكته الرأسية. فمن حيث الألوان، يقبل العنصر النائب جميع كلاسات الخلفيات الدلالية مثل .bg-primary و.bg-success و.bg-secondary لتتناغم مع هوية البطاقة.
أما من حيث السماكة الرأسية، فيتيح لك بوتستراب أربع درجات جاهزة هي الحجم الكبير .placeholder-lg للعناوين الرئيسية، والحجم الافتراضي للفقرات، والحجم الصغير .placeholder-sm للتفاصيل الفرعية، والحجم الدقيق .placeholder-xs للبيانات الوصفية الرفيعة.
<div aria-hidden="true">
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
</div>لكي يدرك المستخدم أن التطبيق يعمل فعلياً في الخلفية ولم يتجمد، يوفر Bootstrap 5 حاويتين حركيتين تُوضعان على العنصر الأب المغلِّف للأشرطة النائبة: كلاس .placeholder-glow الذي يصنع نبضاً هادئاً بتدرج الشفافية صعوداً وهبوطاً، وكلاس .placeholder-wave الذي يمرر موجة إضاءة انسيابية عبر قناع mask-image خطي.
اختبر الفروق البصرية الحية بين الأنماط الأربعة في المختبر التفاعلي التالي:
لبناء بطاقة تحميل هيكلية متكاملة تطابق البطاقة الحقيقية بنسبة مئة بالمئة، نحجز مكان الصورة العلوية باستخدام حاوية نسبة أبعاد مثل .ratio.ratio-16x9 بخلفية هادئة، ثم نضع عنوان البطاقة وفقراتها داخل .placeholder-glow، ونعطّل الزر السفلي بكلاس .disabled والسمتين tabindex="-1" وaria-disabled="true" لمنع انتقال تركيز لوحة المفاتيح إليه أثناء التحميل.
<div class="card" aria-hidden="true">
<div class="card-body placeholder-glow">
<h5><span class="placeholder col-6"></span></h5>
<p><span class="placeholder col-9"></span></p>
<a class="btn btn-primary disabled placeholder col-5"
tabindex="-1" aria-disabled="true"></a>
</div>
</div>يلخص الجدول المرجعي التالي كافة كلاسات وسمات مكوّن العناصر النائبة في Bootstrap 5.3:
| الكلاس أو السمة | العنصر المستهدف | الوظيفة الدقيقة في الواجهة |
|---|---|---|
.placeholder | <span> أو <a> | تحويل العنصر إلى شريط تحميل مصمت يرث اللون الحالي وبشفافية نصفية |
.col-* أو .w-* | العنصر النائب نفسه | ضبط العرض الأفقي للسطر النائب كنسبة من عرض البطاقة أو الفقرة |
.placeholder-lg / sm / xs | العنصر النائب نفسه | التحكم في السماكة الرأسية للشريط بما يحاكي العناوين أو النصوص الفرعية |
.placeholder-glow | الحاوية الأب | إضافة نبض هادئ متكرر في درجة شفافية الأشرطة الداخلية |
.placeholder-wave | الحاوية الأب | تمرير موجة إضاءة متحركة عبر قناع خطي لإبراز استمرار الجلب |
aria-hidden="true" | حاوية الهيكل المؤقت | حجب الأشرطة الشكلية الصماء عن قارئات الشاشة مع إعلان حالة التحميل بنص مخفي |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء هياكل التحميل التمهيدية عبر كلاس .placeholder وضبط أطوالها بأعمدة الشبكة ونسب العرض، وتخصيص ألوانها وسماكتها وحركتي النبض والموجة مع مراعاة إخفائها عن قارئات الشاشة. الخطوة التالية: انتقل الآن إلى الموديول السادس ودرس «حقول الإدخال الأساسية في بوتستراب 5» لبناء نماذج إدخال عصرية نظيفة بدون الكلاسات القديمة الملغاة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Skeleton Loader هيكل التحميل التمهيدي
- نموذج تمهيدي مؤقت يحاكي تخطيط البطاقات والأسطر المتوقع وصولها لمنع قفز العناصر المفاجئ أثناء التحميل.
- للمراجعة
- 02 Placeholder Glow تأثير النبض الهادئ
- كلاس يُضاف للحاوية الأب في بوتستراب ليمنح الأشرطة النائبة بداخلها نبضاً متدرجاً في الشفافية يدل على استمرار المعالجة.
- للمراجعة
- 03 Placeholder Wave تأثير الموجة المتحركة
- كلاس حركي يمرر موجة إضاءة متدرجة عبر قناع CSS فوق العناصر النائبة لمنح شعور بانسياب البيانات.
- للمراجعة
- 04 Layout Stability استقرار التخطيط البصري
- الحفاظ على الأبعاد الدقيقة للعناصر قبل وصول محتواها الفعلي بحيث لا تنزاح الأزرار والفقرات المجاورة فجأة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CLS CLS
- Cumulative Layout Shift
- الانزياح التراكمي للتخطيط — أحد مؤشرات أداء الويب الأساسية لقياس مقدار القفز غير المتوقع لعناصر الصفحة المرئية أثناء التحميل.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- تطبيقات الإنترنت الغنية المتاحة — سمات قياسية مثل aria-hidden وaria-disabled تُستخدم لحجب الأشرطة التزيينية المؤقتة عن قارئات الشاشة.
- للمراجعة
- 03 UX UX
- User Experience
- تجربة المستخدم — انطباع السرعة والسلاسة الذي يشعر به الزائر عند رؤية هيكل البطاقة فوراً بدلاً من شاشة بيضاء صماء.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — طبقة التنسيق التي تشغّل العناصر النائبة في بوتستراب بالكامل دون الاعتماد على أي ملف جافاسكريبت.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ بطاقة .card مزودة بسمة aria-hidden="true" تضم جسماً بكلاس .placeholder-glow وعنواناً نائباً بعرض .col-6 وسطرين نصيين بعرض .col-9 و.col-5 مع زر .btn-primary معطل بكلاس .placeholder.
-
رتّب أربعة عناصر .placeholder بعرض كامل .col-12 داخل حاوية .placeholder-wave باستخدام الدرجات .placeholder-lg والافتراضي و.placeholder-sm و.placeholder-xs مع ألوان خلفية دلالية مختلفة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.