البطاقات في إطار العمل Bootstrap

يوفّر مكوِّن البطاقات Cards في إطار العمل Bootstrap حاويةً مرنة وقابلة للتمديد ذات تنويعات وخيّارات متعدّدة.

حول البطاقات في Bootstrap

البطاقة هي حاوية مرنة وقابلة للتمديد؛ تتضمّن خياراتٍ للترويسات والتذييلات، ومحتوى ذا أنواع مختلفة، وألوان خلفيّات سياقيّة وخيارات عرض قويّة. تحلّ البطاقات في الإصدار 4 من إطار العمل Bootstrap محلّ اللوحات Panels، والصوّر المُصغَّرة Thumbnails في الإصدار 3. توجد أصناف معدِّلة للبطاقات تصلُح لاختيّار وظائف مشابهة للمكوِّنات المذكورة من الإصدار السابق.

مثال

بُنيتْ البطاقات بحيث تستخدم أقلّ ما يمكن من الأنماط والوسوم، رغم ذلك يمكنها توفير الكثير من طرق التحكّم والتخصيص. تتيح البطاقات، التي تعتمد على تخطيط Flexbox، سهولة المحاذاة وتمتزج جيّدًا مع مكوِّنات Bootstrap الأخرى. لا تستخدمُ البطاقات مبدئيًّا حاشيّات (margin)، لذا استخدم [أدوات التباعد](https://wiki.hsoub.com/Bootstrap/spacing) إنْ اقتضت الضرورة.

يوجد أدناه مثال على بطاقة قاعديّة ذات محتوى مختلَط وعرض ثابت. لا يُحدَّد عرضٌ للبطاقات في البداية، لذا تشغل - طبيعيًّا - عرض العنصُر الأب كاملا. يمكن تخصيص العرض بسهولة عن طريق خيارات الحجم.

<syntaxhighlight lang="html">

 <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

مثال سريع لنصّ في عنوان البطاقة ونصّ يشغل أغلب محتواها

   <a href="#" class="btn btn-primary">اذهب إلى مكان مّا</a>

أنواع المحتوى

تدعم البطاقات أنواعَ محتوى كثيرةً بما فيها الصوّر، والنصوص، ومجموعات القوائم، والروابط وغيرها. توجد أدناه أمثلة على المحتوى المدعوم في البطاقات.

متن البطاقة

يشير الصنف `‎.card-body` إلى الكتلة المشيِّدة للبطاقة. استخدمه عندما تريد مقطعًا بحاشيّة داخل البطاقة.

<syntaxhighlight lang="html">

   هذا نصّ داخل متن بطاقة.

العناوين، والنصوص والروابط

تُضاف عناوين إلى البطاقات بإضافة الصنف `‎.card-title` إلى وسوم الترويسات (`<h*‎>`). تُضاف الروابط بطريقة مشابهة بإضافة الصنف `‎.card-link` إلى الوسم `<a>`، وتوضع الواحد جنب الآخر.

تُضاف العناوين الفرعيّة بتطبيق الصنف `‎.card-subtitle` على الوسوم `<h‎*‎>`. يُحاذى العنوان الرئيسيّ والعنوان الفرعيّ بطريقة رائعة عند وضع العناصر `‎.card-title` و `‎.card-subtitle` داخل متن البطاقة (`‎.card-body`).

<syntaxhighlight lang="html">

عنوان بطاقة

عنوان فرعيّ

مثال سريع لنصّ في عنوان البطاقة ونصّ يشغل أغلب محتواها.

   <a href="#" class="card-link">رابط في بطاقة</a>
   <a href="#" class="card-link">رابط آخر</a>

الصوّر

يضيف الصنف `‎.card-img-top` صورةً في الجانب العلويّ من البطاقة. تمكن إضافة نصّ إلى البطاقة بالصنف `‎.card-text`. يمكن تنسيق النصّ داخل `‎.card-text` بوسوم HTML المعياريّة.

<syntaxhighlight lang="html">

 <img class="card-img-top" src="..." alt="Card image cap">

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

مجموعات القوائم

استخدم الصنف `‎.list-group-flush` ضمن البطاقة لإنشاء مجموعة قائمة.

<syntaxhighlight lang="html">

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

• إضافة عنوان للقائمة بالصنف `‎.card-header`.

<syntaxhighlight lang="html">

   Featured

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

محتوى مُختلط

امزج بين استخدام محتوى ذي أنواع متعدّدة داخل نفس البطاقة. تظهر أدناه أنماط لصوّر، وكتل، ونصوص وقائمة؛ كلّها مغلَّفة ببطاقة ذات عرض ثابت.

<syntaxhighlight lang="html">

 <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

• عنصُر في قائمة
• عنصُر في قائمة in
• عنصُر في قائمة

   <a href="#" class="card-link">رابط</a>
   <a href="#" class="card-link">رابط آخر</a>

الترويسة والتذييل

أضف ترويسة (`‎.card-header`) أو تذييلا (`‎.card-footer`) أو هما معًا إلى بطاقة.

<syntaxhighlight lang="html">

   مُميّز

عنوان بطاقة

محتوى نصّي داخل البطاقة

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

تُنسَّق ترويسات البطاقات بإضافة الصنف `‎.card-header` إلى عناصر `<h*‎>`.

<syntaxhighlight lang="html">

مُميّز

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

<syntaxhighlight lang="html">

   اقتباس

مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر

<footer class="blockquote-footer">ذكره إنسان مشهور في مصدر الاقتباس</footer>

<syntaxhighlight lang="html">

   مُميّز

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

   قبل يوميْن

ضبط قيّاس البطاقات

لا تُحدَّد للبطاقة في إطار العمل Bootstrap أيّة قيمة للعرض (`width`)، لذا فإنّها تأخذ العرض كاملًا إلّا إذا حُدِّدت قيمة أخرى. يمكن التعديل على هذا السلوك بأنماط CSS مُخصَّصة، أو أصناف الشبكة Grid في Bootstrap، أو بمخاليط Sass الخاصّة بالشبكة أو الأصناف الخدميّة التي يقدّمها Bootstrap.

ضبط قيّاس البطاقات بأصناف الشبكة

يمكن تغليف البطاقات بأعمدة أو سطور الشبكة حسب الحاجة.

<syntaxhighlight lang="html">

عنوان بطاقة

محتوى نصّي داخل البطاقة.

       <a href="#" class="btn btn-primary">انقر على الرابط</a>

عنوان بطاقة

محتوى نصّي داخل البطاقة.

       <a href="#" class="btn btn-primary">انقر على الرابط</a>

باستخدام الأصناف الخدمية (الأدوات)

تتوفّر مجموعة من الأدوات المفيدة ل[ضبط الأبعاد](https://wiki.hsoub.com/Bootstrap/sizing) في Bootstrap؛ يمكن استخدام بعضها لضبط عرض البطاقات بسرعة.

<syntaxhighlight lang="html">

عنوان البطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">Button</a>

عنوان البطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">Button</a>

استخدام أنماط مُخصَّصة

استخدم أنماطًا مُخصَّصة ضمن ملفّات CSS أو مباشرة على السطر Inline لتحديد عرض البطاقة.

<syntaxhighlight lang="html">

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

محاذاة النصّ =

يمكن باستخدام [أدوات النصوص](https://wiki.hsoub.com/Bootstrap/text) التعديل بسرعة على محاذاة النصّ في أيّة بطاقة، كاملةً أو جزئيّا.

<syntaxhighlight lang="html">

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

التنقّل =

استخدم عناصر التنقّل في Bootstrap لإضافة قابليّة التنقّل إلى ترويسة بطاقة.

<syntaxhighlight lang="html">

• <a class="nav-link active" href="#">نشط</a>
• <a class="nav-link" href="#">رابط</a>
• <a class="nav-link disabled" href="#">مُعطّل</a>

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

<syntaxhighlight lang="html">

• <a class="nav-link active" href="#">نشط</a>
• <a class="nav-link" href="#">رابط</a>
• <a class="nav-link disabled" href="#">مُعطّل</a>

عنوان بطاقة

محتوى نصّي داخل البطاقة.

   <a href="#" class="btn btn-primary">انقر على الرابط</a>

الصوّر

تتضمّن البطاقات بضع خيّارات للعمل مع الصوّر. اختر بين إضافة "قبّعات" أعلى البطاقة أو أسفلها، تغطيّة الصوّر بمحتوى البطاقة أو بكلّ بساطة تضمين صورة داخل البطاقة.

القبّعات

يمكن للبطاقات أن تحتوي على صور في الأعلى أو الأسفل، على نحو مشابه للترويسات والتذييلات.

<syntaxhighlight lang="html">

<img class="card-img-top" src="..." alt="Card image cap">

عنوان بطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

عُدِّل قبل 3 دقائق

عنوان بطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

عُدِّل قبل 3 دقائق

<img class="card-img-bottom" src="..." alt="Card image cap">

تغطيّة الصوّر بمحتوى البطاقة

اجعل صورة خلفيّةً لبطاقة بحيث يغطّي النصّ الصورة. قد تحتاج إلى تنسيقات أو أدوات إضافية حسب الصورة.

<syntaxhighlight lang="html">

 <img class="card-img" src="..." alt="Card image">

عنوان البطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

عُدِّل قبل 3 دقائق

تنسيقات البطاقات =

تحوي البطاقات خيّاراتٍ عدّة لتخصيص الخلفيّات، والإطارات والألوان.

الخلفيّة والألوان

استخدم [أدوات النصوص والخلفيّة](https://wiki.hsoub.com/Bootstrap/colors/) لتعديل مظهر البطاقات. <syntaxhighlight lang="html">

رأسيّة

عنوان بطاقة بالخلفيّة الرئيسيّة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بالخلفيّة الثانويّة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة تدلّ على نجاح إجراء

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة تدلّ على خطر

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة تدلّ على تحذير

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة تدلّ على معلومة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة خفيفة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بخلفيّة غامقة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

تنبيه:توصيل المعنى إلى التقنيّات المساعدة

يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف `‎.sr-only`.

الإطار

استخدم [أدوات الإطارات](https://wiki.hsoub.com/Bootstrap/borders) في Bootstrap للتعديل على لون إطار البطاقة (`border-color`). لاحظ أنّه يمكن تطبيق الأصناف `‎.text-{color}` على العنصُر الأب حيث يوجد الصنف `‎.card` أو على جزء من محتوى البطاقة كما هو موضّح في المثال التالي.

<syntaxhighlight lang="html">

رأسيّة

عنوان بطاقة بلون رئيسيّ

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون ثانويّ

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون يدلّ على نجاح إجراء

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون الخطر

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون التحذير

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون المعلومة

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون خفيف

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

رأسيّة

عنوان بطاقة بلون غامق

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

كما يمكن تغيير الإطارات على ترويسة البطاقة أو تذييلها حسب الحاجة، حتى إنّه يمكنك حذف لون الخلفيّة بالصنف `‎‎.bg-transparent`.

<syntaxhighlight lang="html">

رأسيّة

عنوان بطاقة بلون يدلّ على نجاح إجراء

مثال سريع لنصّ يشغل أغلب محتوى البطاقة

تذييل

مُخطّطات البطاقات

يوفّر إطار العمل Bootstrap - علاوةً على إمكانيّة تنسيق المحتوى داخل البطاقات - بضعة خيّارات لوضع مُخطّطات لسلسلة من البطاقات. مُخطّطات البطاقات ليست - لحدّ الساعة - متجاوبة.

مجموعات البطاقات

استخدم مجموعات البطاقات لعرض البطاقات مجتمعة ضمن نفس العنصُر، بحيث تكون جميع البطاقات في المجموعة ذات عرض متساو، وذات ارتفاع متساو كذلك. تستخدم مجموعات البطاقات الخاصيّة `‎‎display: flex;‎` للحصول على أبعاد منتظمة.

<syntaxhighlight lang="html">

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

محتوى نصّي داخل البطاقة

عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات

عُدِّل قبل 3 دقائق

تنتظم التذييلات تلقائيَّا على نفس السطر عند استخدامها في بطاقات المجموعة.

<syntaxhighlight lang="html">

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

     عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

محتوى نصّي داخل البطاقة

     عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات

     عُدِّل قبل 3 دقائق

رزمات البطاقات Card decks

هل تحتاج إلى عدّة بطاقات ذات ارتفاع متماثل وعرض متساو دون أن تكون متلاصقة؟ استخدم رزمات البطاقات.

<syntaxhighlight lang="html">

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

محتوى نصّي داخل البطاقة

عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات

عُدِّل قبل 3 دقائق

تنتظم التذييلات في رزم البطاقات على نفس السطر، مثل ما هي الحال في مجموعات البطاقات.

<syntaxhighlight lang="html">

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

     عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

محتوى نصّي داخل البطاقة

     عُدِّل قبل 3 دقائق

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات

     عُدِّل قبل 3 دقائق

أعمدة من البطاقات

يمكن تنظيم البطاقات في أعمدة على شاكلة مكتبة [Masonry](https://masonry.desandro.com/) بمجرّد تغليفها ضمن الصنف `‎.card-columns`. تعتمد البطاقات في هذه الحالة على خاصيّات `column` في CSS بدلًا من تخطيط Flexbox لمحاذاة أسهل. تُرتَّب البطاقات من الأعلى إلى الأسفل ومن اليسار إلى اليمين.

انتبه! يختلف عدد البطاقات في الأعمدة، لذا يعيّن إطار العمل الخاصيّة `display: inline-block` لمنع تجزئة بطاقة على عموديْن، إذْ أنّ استخدام الخاصيّة `column-break-inside: avoid` ليس حلًّا مجرّبًا لحدّ الساعة.

<syntaxhighlight lang="html">

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان بطاقة تنتقل إلى سطر جديد

هذه بطاقة عريضة نوعًا ما، والمحتوى فيه أطول من أغلب البطاقات الأخرى.

مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر

<footer class="blockquote-footer"> ذكره إنسان مشهور في مصدر الاقتباس </footer>

   <img class="card-img-top" src="..." alt="Card image cap">

عنوان البطاقة

محتوى نصّي داخل البطاقة

عُدِّل قبل 3 دقائق

مثال لنصّ داخل بطاقة ضمن مجموعة من الأعمدة.

<footer class="blockquote-footer"> ذكره إنسان مشهور في مصدر الاقتباس </footer>

عنوان البطاقة

محتوى نصّي داخل البطاقة

عُدِّل قبل 3 دقائق

   <img class="card-img" data-src="holder.js/100px260/" alt="Card image">

مثال لنصّ مقتبس من كتاب أو مقال أو دراسة أو غيرها من المصادر

<footer class="blockquote-footer"> ذكره إنسان مشهور في مصدر الاقتباس </footer>

عنوان البطاقة

هذه بطاقة عريضة جدُّا ويوجد بها محتوى أكثر من أية بطاقة أخرى لعرض تساوي ارتفاع البطاقات

عُدِّل قبل 3 دقائق

يمكن تمديد أعمدة البطاقات وتخصيصها بشفرة إضافيّة. يوجد أدناه مثال على تمديد الصنف `‎.card-columns` باستخدام نفس خاصيّات CSS المستخدمة في إنشاء أعمدة البطاقات.

<syntaxhighlight lang="sass"> .card-columns {

 @include media-breakpoint-only(lg) {
   column-count: 4;
 }
 @include media-breakpoint-only(xl) {
   column-count: 5;
 }

}

مصادر =

• [صفحة Cards في توثيق Bootstrap](https://getbootstrap.com/docs/4.0/components/card/).