البطاقات في إطار العمل Bootstrap
يوفّر مكوِّن البطاقات Cards في إطار العمل Bootstrap حاويةً مرنة وقابلة للتمديد ذات تنويعات وخيّارات متعدّدة.
حول البطاقات في Bootstrap
البطاقة هي حاوية مرنة وقابلة للتمديد؛ تتضمّن خياراتٍ للترويسات والتذييلات، ومحتوى ذا أنواع مختلفة، وألوان خلفيّات سياقيّة وخيارات عرض قويّة. تحلّ البطاقات في الإصدار 4 من إطار العمل Bootstrap محلّ اللوحات (Panels)، والصوّر المُصغَّرة (Thumbnails) في الإصدار 3. توجد أصناف معدِّلة للبطاقات تصلُح لاختيّار وظائف مشابهة للمكوِّنات المذكورة من الإصدار السابق.
مثال
بُنيتْ البطاقات بحيث تستخدم أقلّ ما يمكن من الأنماط والوسوم، رغم ذلك يمكنها توفير الكثير من طرائق التحكّم والتخصيص. تتيح البطاقات، التي تعتمد على تخطيط Flexbox، سهولة المحاذاة وتمتزج جيّدًا مع مكوِّنات Bootstrap الأخرى. لا تستخدمُ البطاقات مبدئيًّا حاشيّات (margin)، لذا استخدم أدوات التباعد إنْ اقتضت الضرورة.
يوجد أدناه مثال على بطاقة قاعديّة ذات محتوى مختلَط وعرض ثابت. لا يُحدَّد عرضٌ للبطاقات في البداية، لذا تَشغُلُ - طبيعيًّا - عرض العنصُر الأب كاملا. يمكن تخصيص العرض بسهولة عن طريق خيارات الحجم.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">مثال سريع لنصّ في عنوان البطاقة ونصّ يشغل أغلب محتواها</p>
<a href="#" class="btn btn-primary">اذهب إلى مكان مّا</a>
</div>
</div>
أنواع المحتوى
تدعم البطاقات أنواعَ محتوى كثيرةً بما فيها الصوّر، والنصوص، ومجموعات القوائم، والروابط وغيرها. توجد أدناه أمثلة على المحتوى المدعوم في البطاقات.
متن البطاقة
يشير الصنف .card-body إلى الكتلة المشيِّدة للبطاقة. استخدمه عندما تريد مقطعًا بحاشيّة (padding) داخل البطاقة.
<div class="card">
<div class="card-body">
هذا نصّ داخل متن بطاقة.
</div>
</div>
العناوين، والنصوص والروابط
تُضاف عناوين إلى البطاقات بإضافة الصنف .card-title إلى وسوم الترويسات (<h1>-<h6>). تُضاف الروابط بطريقة مشابهة بإضافة الصنف .card-link إلى الوسم ، وتوضع الواحد جنب الآخر.
تُضاف العناوين الفرعيّة بتطبيق الصنف .card-subtitle على الوسوم <h1>-<h6>. يُحاذى العنوان الرئيسيّ والعنوان الفرعيّ بطريقة رائعة عند وضع العناصر .card-title و .card-subtitle داخل متن البطاقة (.card-body).
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<h6 class="card-subtitle mb-2 text-muted">عنوان فرعيّ</h6>
<p class="card-text">مثال سريع لنصّ في عنوان البطاقة ونصّ يشغل أغلب محتواها.</p>
<a href="#" class="card-link">رابط في بطاقة</a>
<a href="#" class="card-link">رابط آخر</a>
</div>
</div>
الصوّر
يضيف الصنف .card-img-top صورةً في الجانب العلويّ من البطاقة. يمكن إضافة نصّ إلى البطاقة بالصنف .card-text. يمكن تنسيق النصّ داخل.card-text بوسوم HTML المعياريّة.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
مجموعات القوائم
استخدم الصنف .list-group-flush ضمن البطاقة لإنشاء مجموعة قائمة.
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
- إضافة عنوان للقائمة بالصنف
.card-header
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
محتوى مُختلط
امزج بين استخدام محتوى ذي أنواع متعدّدة داخل نفس البطاقة. تظهر أدناه أنماط لصوّر، وكتل، ونصوص وقائمة؛ كلّها مغلَّفة ببطاقة ذات عرض ثابت.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">عنصُر في قائمة</li>
<li class="list-group-item">عنصُر في قائمة in</li>
<li class="list-group-item">عنصُر في قائمة</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">رابط</a>
<a href="#" class="card-link">رابط آخر</a>
</div>
</div>
الترويسة والتذييل
أضف ترويسة (.card-header) أو تذييلًا (.card-footer) أو هما معًا إلى بطاقة.
<div class="card">
<div class="card-header">
مُميّز
</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
تُنسَّق ترويسات البطاقات بإضافة الصنف .card-header إلى عناصر <h1>-<h6>.
مثال عن الصنف .card-header مع ترويسة:
<div class="card">
<h5 class="card-header">مُميّز</h5>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
مثال عن الصنف .card-header مع اقتباس:
<div class="card">
<div class="card-header">
اقتباس
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر</p>
<footer class="blockquote-footer">ذكره إنسان مشهور في <cite title="مصدر الاقتباس">مصدر الاقتباس</cite></footer>
</blockquote>
</div>
</div>
مثال عن الصنف .card-header مع دعوة إلى اتخاذ إجراء:
<div class="card text-center">
<div class="card-header">
مُميّز
</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
<div class="card-footer text-muted">
قبل يوميْن
</div>
</div>
ضبط قياس البطاقات
لا تُحدَّد للبطاقة في إطار العمل Bootstrap أيّة قيمة للعرض (width)، لذا فإنّها تأخذ العرض كاملًا (أي القيمة 100%) إلّا إذا حُدِّدت قيمة أخرى. يمكن التعديل على هذا السلوك بأنماط CSS مُخصَّصة، أو أصناف الشبكة Grid في Bootstrap، أو بمخاليط Sass الخاصّة بالشبكة أو الأصناف الخدميّة التي يقدّمها Bootstrap.
ضبط قيّاس البطاقات بأصناف الشبكة
يمكن تغليف البطاقات بأعمدة أو سطور الشبكة حسب الحاجة.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
</div>
</div>
باستخدام الأصناف الخدمية (الأدوات)
تتوفّر مجموعة من الأدوات المفيدة لضبط الأبعاد في Bootstrap؛ يمكن استخدام بعضها لضبط عرض البطاقات بسرعة.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">زرّ</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
استخدام أنماط مُخصَّصة
استخدم أنماطًا مُخصَّصة ضمن ملفّات CSS أو مباشرة على العنصر (inline) لتحديد عرض البطاقة.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
محاذاة النصّ
يمكن باستخدام أدوات النصوص التعديل بسرعة على محاذاة النصّ في أيّة بطاقة، كاملةً أو جزئيّا.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
التنقّل
استخدم عناصر التنقّل في Bootstrap لإضافة قابليّة التنقّل إلى ترويسة بطاقة.
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">نشط</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطّل</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
تنسيق مختلف لقائمة التنقل للمثال السابق:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">نشط</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطّل</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة.</p>
<a href="#" class="btn btn-primary">انقر على الرابط</a>
</div>
</div>
الصوّر
تتضمّن البطاقات بضع خيّارات للعمل مع الصوّر. اختر بين إضافة "قبّعات" (image caps) أعلى البطاقة أو أسفلها، أو تغطيّة الصوّر بمحتوى البطاقة، أو بكلّ بساطة تضمين صورة داخل البطاقة.
القبّعات
يمكن للبطاقات أن تحتوي على صور في الأعلى أو الأسفل، على نحو مشابه للترويسات والتذييلات.
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>
تغطيّة الصوّر بمحتوى البطاقة
اجعل صورة خلفيّةً لبطاقة بحيث يغطّي النصّ الصورة. قد تحتاج إلى تنسيقات أو أدوات إضافية حسب الصورة.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
ملحوظة: لا ينبغي أن يكون المحتوى أطول من ارتفاع الصورة. وإلا قد يُعرض خارجها.
البطاقات الأفقية
يمكن جعل البطاقات أفقية بصورة متجاوبة مع الجوالات عبر استعمال الشبكة وبعض الأصناف المساعدة. سنزيل في المثال أدناه فجوة الشبكة عبر إضافة .no-gutters و .col-md-*لجعل البطاقة أفقية عند النقطة الحديةmd.:
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة فيها نص داعم كمقدمة لمحتوى إضافي.
</p>
<p class="card-text"><small class="text-muted">آخر تحديث قبل 3 دقائق</small></p>
</div>
</div>
</div>
</div>
تنسيقات البطاقات
تحوي البطاقات خيّاراتٍ عدّة لتخصيص الخلفيّات، والإطارات والألوان.
الخلفيّة والألوان
استخدم أدوات النصوص والخلفيّة لتعديل مظهر البطاقات.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بالخلفيّة الرئيسيّة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بالخلفيّة الثانويّة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة تدلّ على نجاح إجراء</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة تدلّ على خطر</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة تدلّ على تحذير</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة تدلّ على معلومة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة خفيفة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بخلفيّة غامقة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
تنبيه: توصيل المعنى إلى التقنيّات المساعدة
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصنف .sr-only.
الإطار
استخدم أدوات الإطارات في Bootstrap للتعديل على لون إطار البطاقة (border-color). لاحظ أنّه يمكن تطبيق الأصناف .text-{color} على العنصُر الأب حيث يوجد الصنف .card أو على جزء من محتوى البطاقة كما هو موضّح في المثال التالي.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-primary">
<h5 class="card-title">عنوان بطاقة بلون رئيسيّ</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-secondary">
<h5 class="card-title">عنوان بطاقة بلون ثانويّ</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-success">
<h5 class="card-title">عنوان بطاقة بلون يدلّ على نجاح إجراء</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-danger">
<h5 class="card-title">عنوان بطاقة بلون الخطر</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-warning">
<h5 class="card-title">عنوان بطاقة بلون التحذير</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-info">
<h5 class="card-title">عنوان بطاقة بلون المعلومة</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body">
<h5 class="card-title">عنوان بطاقة بلون خفيف</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">رأسيّة</div>
<div class="card-body text-dark">
<h5 class="card-title">عنوان بطاقة بلون غامق</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
</div>
مخاليط مساعدة
كما يمكن تغيير الإطارات على ترويسة البطاقة أو تذييلها حسب الحاجة، حتى إنّه يمكنك حذف لون الخلفيّة بالصنف .bg-transparent.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">رأسيّة</div>
<div class="card-body text-success">
<h5 class="card-title">عنوان بطاقة بلون يدلّ على نجاح إجراء</h5>
<p class="card-text">مثال سريع لنصّ يشغل أغلب محتوى البطاقة</p>
</div>
<div class="card-footer bg-transparent border-success">تذييل</div>
</div>
مخططات البطاقات
يوفّر إطار العمل Bootstrap - علاوةً على إمكانيّة تنسيق المحتوى داخل البطاقات - بضعة خيّارات لوضع مُخطّطات لسلسلة من البطاقات. مُخطّطات البطاقات ليست - لحدّ الساعة - متجاوبة.
مجموعات البطاقات
استخدم مجموعات البطاقات لعرض البطاقات مجتمعة ضمن نفس العنصُر، بحيث تكون جميع البطاقات في المجموعة ذات عرض متساو، وذات ارتفاع متساوٍ كذلك. تستخدم مجموعات البطاقات الخاصيّة display: flex; للحصول على أبعاد منتظمة.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text"> هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
</div>
تنتظم التذييلات تلقائيَّا على نفس السطر عند استخدامها في بطاقات المجموعة.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text"> هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
</div>
رزمات البطاقات (Card decks)
هل تحتاج إلى عدّة بطاقات ذات ارتفاع متماثل وعرض متساو دون أن تكون متلاصقة؟ استخدم رزمات البطاقات.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text"> هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
</div>
تنتظم التذييلات في رزم البطاقات على نفس السطر، مثل ما هي الحال في مجموعات البطاقات.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text"> هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
<div class="card-footer">
<small class="text-muted">عُدِّل قبل 3 دقائق</small>
</div>
</div>
</div>
شبكة البطاقات
استخدم نظام الشبكة في Bootstrap وأصناف .row-cols للتحكم في عدد أعمدة الشبكة (المحيطة ببطاقاتك) التي تريد عرضها في كل صف. على سبيل المثال ، الصنف .row-cols-1 يعرض البطاقات على عمود واحد، أما .row-cols-md-2 فيقسم أربع بطاقات بالتساوي ويعرضها على عدة صفوف ابتداء من النقطة الحدية المتوسطة.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
</div>
استعمل الصنف .row-cols-3 وسترى البطاقة الرابعة مُغلّفة.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات.</p>
</div>
</div>
</div>
</div>
إن احتجت تسوية ارتفاعات البطاقات، أضف الصنف .h-100 إليها. إذا أردت ارتفاعات متساوية افتراضيًا ، يمكنك تعيين $card-height: 100% في Sass.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة قصيرة</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة طويلة جدُّا مع نص داعم كمقدمة لمحتوى إضافي </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
أعمدة من البطاقات
يمكن تنظيم البطاقات في أعمدة على شاكلة مكتبة Masonry بمجرّد تغليفها ضمن الصنف .card-columns. تعتمد البطاقات في هذه الحالة على تخطيط الأعمدة في CSS بدلًا من تخطيط Flexbox لمحاذاة أسهل. تُرتَّب البطاقات من الأعلى إلى الأسفل ومن اليسار إلى اليمين.
انتبه! يختلف عدد البطاقات في الأعمدة، لذا يعيّن إطار العمل الخاصيّة display: inline-block لمنع تجزئة بطاقة على عموديْن، إذْ أنّ استخدام الخاصيّة column-break-inside: avoid ليس حلًّا مجرّبًا لحدّ الساعة.
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان بطاقة تنتقل إلى سطر جديد</h5>
<p class="card-text">هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر</p>
<footer class="blockquote-footer">
<small class="text-muted">
ذكره إنسان مشهور في <cite title="مصدر الاقتباس">مصدر الاقتباس</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>مثال لنصّ داخل بطاقة ضمن مجموعة من الأعمدة.</p>
<footer class="blockquote-footer">
<small>
ذكره إنسان مشهور في <cite title="مصدر الاقتباس">مصدر الاقتباس</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">محتوى نصّي داخل البطاقة</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر</p>
<footer class="blockquote-footer">
<small class="text-muted">
ذكره إنسان مشهور في <cite title="مصدر الاقتباس">مصدر الاقتباس</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text"> هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات</p>
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p>
</div>
</div>
</div>
يمكن تمديد أعمدة البطاقات وتخصيصها بشفرة إضافيّة. يوجد أدناه مثال على تمديد الصنف .card-columns باستخدام نفس خاصيّات CSS المستخدمة في إنشاء أعمدة البطاقات.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}