شرح صفوف ومحتوى الفقرة
لبناء بطاقة تحميل هيكلية متكاملة تطابق البطاقة الحقيقية بنسبة مئة بالمئة، نحجز مكان الصورة العلوية باستخدام حاوية نسبة أبعاد مثل .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» لبناء نماذج إدخال عصرية نظيفة بدون الكلاسات القديمة الملغاة.