شرح صفوف ومحتوى الفقرة
عند الرغبة في دمج عدة بطاقات متلاصقة بلا فواصل في كتلة موحدة متساوية الطول والعرض على الشاشات المتوسطة فما فوق، يوفر بوتستراب الحاوية .card-group. أما لجعل البطاقة بأكملها قابلة للنقر كما في بطاقات المقالات، فما عليك سوى إضافة الكلاس .stretched-link إلى الرابط أو الزر داخل .card-body دون حتى إضافة .position-relative لأن مكوّن البطاقة يطبّقه تلقائياً!
| نمط البطاقة | تركيبة الكلاسات في Bootstrap 5.3 | السلوك الهندسي |
|---|---|---|
| البطاقة القياسية | .card + .card-body | حاوية Flexbox مرنة تمتد بعرض العمود الأب |
| البطاقة الأفقية | .row .g-0 مع .col-md-4 و.col-md-8 | تتكدس رأسياً بالهاتف وتتجاور أفقياً بالحاسوب |
| شبكة متساوية الارتفاع | .row-cols-md-3 .g-4 + .card.h-100 | تتطابق ارتفاعات بطاقات الصف مع فواصل نظيفة |
| بطاقة قابلة للنقر الكامل | .stretched-link على الرابط الداخلي | يتمدد نطاق النقر ليغطي البطاقة بفضل نسبيتها الذاتية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
استوعبت في هذا الدرس بنية البطاقات في بوتستراب 5.3، شاملة الرأس والجسم والتذييل، وصور البطاقات والطبقات المتراكبة، والبطاقات الأفقية المتجاوبة، وشبكات h-100 متساوية الارتفاع، والرابط الممتد. الخطوة التالية: انتقل الآن إلى الدرس السابع والعشرين لتعلّم بناء مجموعات القوائم List Groups العادية والتفاعلية والمدمجة داخل البطاقات والمرقمة تلقائياً.