في هذا الدرس 8تصفّح المواضيع
تُعد البطاقة في Bootstrap 5.3 الوحدة البنائية الأكثر حضوراً في المتاجر الإلكترونية ولوحات التحكم والمدونات الحديثة؛ فهي حاوية محتوى مبنية بالكامل على Flexbox بإطار أنيق واستدارة هادئة. والقاعدة الذهبية الأولى لفهم .card أنها لا تفرض عرضاً ثابتاً من تلقاء نفسها، بل تتمدد بعرض 100% من عنصرها الأب حتى تتحكم أنت في مقاسها بدقة عبر أعمدة الشبكة .col-*.
يمثل الكلاس .card-body القلب النابض للبطاقة، إذ يوفر الحشو الداخلي الموحد حول المحتوى النصي. وبداخله ننسق العنوان الرئيسي عبر .card-title، والعنوان الفرعي عبر .card-subtitle .mb-2 .text-body-secondary، والفقرة الوصفية عبر .card-text، وروابط الإجراءات المتجاورة عبر .card-link التي تضبط المسافة البينية تلقائياً.
<div class="card">
<div class="card-body">
<h5 class="card-title">Cloud Analytics</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">
Real-time Metrics
</h6>
<p class="card-text">Live node latency.</p>
<a href="#open" class="card-link">Open</a>
</div>
</div>يدعم مكوّن البطاقة ثلاثة أوضاع احترافية للصور: وضع الصورة في الأعلى بكلاس .card-img-top لتستدير زاويتاها العلويتان فقط بالتطابق مع إطار البطاقة، أو في الأسفل بكلاس .card-img-bottom، أو تحويل الصورة إلى خلفية كاملة للبطاقة بكلاس .card-img مع وضع النصوص فوقها داخل طبقة .card-img-overlay.
<div class="card">
<img src="/images/examples/laptop-pro.webp"
class="card-img-top" alt="Workstation">
<div class="card-body">
<h5 class="card-title">Studio Pro</h5>
<p class="card-text mb-0">Pro workstation.</p>
</div>
</div>استبدل Bootstrap 5 مكوّنات الوسائط القديمة بنمط البطاقة الأفقية المتجاوبة المبني على نظام الشبكة القياسي: نضع داخل .card صفاً بلا فجوات .row .g-0 يضم عمود الصورة .col-md-4 مع .img-fluid .rounded-start، وبجانبه عمود المحتوى .col-md-8 الحاضن لجسم البطاقة.
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="/images/examples/studio-workspace.webp"
class="img-fluid rounded-start" alt="Desk">
</div>
<div class="col-md-8 p-3">Studio Workspace</div>
</div>
</div>لتخصيص المظهر اللوني للبطاقة وفق أهميتها، استخدم .text-bg-primary أو .text-bg-dark لتلوين البطاقة بالكامل مع تباين نص تلقائي، أو اكتفِ بتلوين الإطار الخارجي بأناقة هادئة عبر .border-success و.border-warning مع إبقاء خلفية الجسم نظيفة ومريحة للقراءة الطويلة.
من أشهر التحديات العملية في تصميم شبكات المنتجات تفاوت ارتفاع البطاقات المتجاورة عندما يطول الوصف في بطاقة ويقصر في أخرى! يحل Bootstrap 5.3 هذه المشكلة بلمسة سحرية واحدة: أضف الكلاس .h-100 على كل عنصر .card داخل أعمدة .row-cols-1 .row-cols-md-3 .g-4 لتتمدد جميع بطاقات الصف بنفس الارتفاع، وضع .mt-auto على زر الإجراء ليلتصق بقاع البطاقة دائماً!
<div class="row row-cols-1 row-cols-md-2 g-3">
<div class="col">
<div class="card h-100 p-3">Short card</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">Longer card text.</div>
</div>
</div>
</div>عند الرغبة في دمج عدة بطاقات متلاصقة بلا فواصل في كتلة موحدة متساوية الطول والعرض على الشاشات المتوسطة فما فوق، يوفر بوتستراب الحاوية .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 العادية والتفاعلية والمدمجة داخل البطاقات والمرقمة تلقائياً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Card Container حاوية البطاقة
- حاوية محتوى مرنة مبنية على Flexbox تتمدد بعرض عنصرها الأب وتضم تموضعاً نسبياً مدمجاً.
- للمراجعة
- 02 Card Image Overlay طبقة نص فوق صورة البطاقة
- طبقة محتوى متموضعة فوق صورة البطاقة الخلفية لعرض العناوين فوق الغلاف المصور.
- للمراجعة
- 03 Equal-Height Card Grid شبكة البطاقات متساوية الارتفاع
- دمج أعمدة الشبكة التلقائية مع كلاس h-100 على البطاقات لتوحيد طولها رغم اختلاف طول النصوص.
- للمراجعة
- 04 Card Group مجموعة البطاقات المتلاصقة
- حاوية تجمع عدة بطاقات متلاصقة جنباً إلى جنب بدون فواصل كشريط موحد على الشاشات المتوسطة والكبيرة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CTA CTA
- Call to Action
- زر الإجراء الرئيسي الذي يثبت في أسفل البطاقة عبر mt-auto لتوحيد محاذاته أفقياً.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- يعكس استدارة جانب الصورة في البطاقات الأفقية تلقائياً ليتوافق مع اتجاه اليمين لليسار.
- للمراجعة
- 03 UI UI
- User Interface
- واجهات العرض المقسمة بوضوح عبر وحدات البطاقات المتكررة.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- تدير خصائص Flexbox ومتغيرات البطاقة المحلية --bs-card-* في الإصدار 5.3.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ بطاقة تضم صفاً بدون فجوات row g-0 مع عمود صورة col-md-4 يحمل img-fluid rounded-start وعمود نص col-md-8.
-
صمّم شبكة من ثلاث بطاقات متساوية الارتفاع عبر h-100 واجعل جسم كل بطاقة عموداً مرناً يدفع الزر للأسفل عبر mt-auto.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما السلوك الافتراضي لعرض عنصر .card في Bootstrap 5 عند عدم تحديد عرض مخصص؟
لا تفرض البطاقة عرضاً ثابتاً افتراضياً، بل تمتد بعرض 100% من العمود الأب لمرونة التجاوب.
أي كلاس يُوضع على كل بطاقة داخل شبكة .row-cols-* لتتساوى جميع بطاقات الصف في الارتفاع؟
يمدد الكلاس .h-100 ارتفاع البطاقة ليطابق أطول عمود شقيق داخل نفس الصف المرن.
يعمل الكلاس .stretched-link داخل عنصر .card مباشرةً دون الحاجة لإضافة .position-relative يدوياً على البطاقة.
نعم، لأن كلاس .card يطبق خاصية position: relative افتراضياً في تنسيقات Bootstrap 5.
كيف نحصل على بطاقة أفقية بدون فراغات بيضاء حول الصورة الجانبية في Bootstrap 5؟
يزيل .g-0 فجوات الأعمدة داخل البطاقة الأفقية فتلتصق الصورة بحافة البطاقة بنظافة تامة.
أي كلاس يُستخدم لوضع نص وعنوان مباشرة فوق صورة البطاقة الخلفية؟
يتموضع .card-img-overlay بتموضع مطلق فوق عنصر .card-img لعرض النصوص فوق الصورة.
لدفع زر الإجراء إلى أسفل البطاقة المتساوية الطول مهما قصر النص فوقه، أي تركيبة نطبقها على .card-body والزر؟
في العمود المرن يدفع الهامش العلوي التلقائي .mt-auto العنصر إلى أقصى الحافة السفلية المتاحة.
في Bootstrap 5 لا يزال الكلاس القديم .card-deck هو الطريقة الرسمية المعتمدة لبناء شبكات البطاقات.
خطأ؛ أُلغي .card-deck في الإصدار الخامس وحلّت محله شبكة .row-cols-* مع فجوات .g-* وكلاس .h-100.
ما الفرق البصري بين استخدام .card-group واستخدام شبكة .row-cols-md-3 .g-4؟
يلغي .card-group الفراغات البينية ويوحد الزوايا الداخلية على الشاشات المتوسطة فما فوق، بينما تفصل .g-4 البطاقات بفجوات واضحة.