الفرق بين المراجعتين لصفحة: «Bootstrap/card»
لا ملخص تعديل |
|||
| (6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 3: | سطر 3: | ||
== حول البطاقات في Bootstrap == | == حول البطاقات في Bootstrap == | ||
'''البطاقة''' هي حاوية مرنة وقابلة للتمديد؛ تتضمّن خياراتٍ للترويسات والتذييلات، ومحتوى ذا أنواع مختلفة، وألوان خلفيّات سياقيّة وخيارات عرض قويّة. تحلّ البطاقات في الإصدار 4 من إطار العمل Bootstrap محلّ اللوحات | '''البطاقة''' هي حاوية مرنة وقابلة للتمديد؛ تتضمّن خياراتٍ للترويسات والتذييلات، ومحتوى ذا أنواع مختلفة، وألوان خلفيّات سياقيّة وخيارات عرض قويّة. تحلّ البطاقات في الإصدار 4 من إطار العمل Bootstrap محلّ اللوحات (Panels)، والصوّر المُصغَّرة (Thumbnails) في الإصدار 3. توجد أصناف معدِّلة للبطاقات تصلُح لاختيّار وظائف مشابهة للمكوِّنات المذكورة من الإصدار السابق. | ||
== مثال == | == مثال == | ||
بُنيتْ البطاقات بحيث تستخدم أقلّ ما يمكن من الأنماط والوسوم، رغم ذلك يمكنها توفير الكثير من | بُنيتْ البطاقات بحيث تستخدم أقلّ ما يمكن من الأنماط والوسوم، رغم ذلك يمكنها توفير الكثير من طرائق التحكّم والتخصيص. تتيح البطاقات، التي تعتمد على [[:تصنيف:CSS Flexbox|تخطيط Flexbox]]، سهولة المحاذاة وتمتزج جيّدًا مع مكوِّنات Bootstrap الأخرى. لا تستخدمُ البطاقات مبدئيًّا حاشيّات (<code>[[CSS/margin|margin]]</code>)، لذا استخدم [[Bootstrap/spacing|أدوات التباعد]] إنْ اقتضت الضرورة. | ||
يوجد أدناه مثال على بطاقة قاعديّة ذات محتوى مختلَط وعرض ثابت. لا يُحدَّد عرضٌ للبطاقات في البداية، لذا | يوجد أدناه مثال على بطاقة قاعديّة ذات محتوى مختلَط وعرض ثابت. لا يُحدَّد عرضٌ للبطاقات في البداية، لذا تَشغُلُ - طبيعيًّا - عرض العنصُر الأب كاملا. يمكن تخصيص العرض بسهولة عن طريق خيارات الحجم. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="card" style="width: 18rem;"> | <div class="card" style="width: 18rem;"> | ||
<img class="card-img-top" | <img src="..." class="card-img-top" alt="..."> | ||
<div class="card-body"> | <div class="card-body"> | ||
<h5 class="card-title">عنوان البطاقة</h5> | <h5 class="card-title">عنوان البطاقة</h5> | ||
| سطر 26: | سطر 26: | ||
=== متن البطاقة === | === متن البطاقة === | ||
يشير الصنف | يشير الصنف <code>.card-body</code> إلى الكتلة المشيِّدة للبطاقة. استخدمه عندما تريد مقطعًا بحاشيّة (<code>[[CSS/padding|padding]]</code>) داخل البطاقة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 38: | سطر 38: | ||
=== العناوين، والنصوص والروابط === | === العناوين، والنصوص والروابط === | ||
تُضاف عناوين إلى البطاقات بإضافة الصنف | تُضاف عناوين إلى البطاقات بإضافة الصنف <code>.card-title</code> إلى وسوم الترويسات (<code>[[HTML/h1-h6|<nowiki><h1>-<h6></nowiki>]]</code>). تُضاف الروابط بطريقة مشابهة بإضافة الصنف <code>.card-link</code> إلى الوسم <code></code>، وتوضع الواحد جنب الآخر. | ||
تُضاف العناوين الفرعيّة بتطبيق الصنف <code>.card-subtitle</code> على الوسوم <code>[[HTML/h1-h6|<nowiki><h1>-<h6></nowiki>]]</code>. يُحاذى العنوان الرئيسيّ والعنوان الفرعيّ بطريقة رائعة عند وضع العناصر <code>.card-title</code> و<code> .card-subtitle</code> داخل متن البطاقة (<code>.card-body</code>). | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 57: | سطر 55: | ||
=== الصوّر === | === الصوّر === | ||
يضيف الصنف | يضيف الصنف <code>.card-img-top</code> صورةً في الجانب العلويّ من البطاقة. يمكن إضافة نصّ إلى البطاقة بالصنف <code>.card-text</code>. يمكن تنسيق النصّ داخل<code>.card-text</code> بوسوم [[HTML]] المعياريّة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 69: | سطر 67: | ||
=== مجموعات القوائم === | === مجموعات القوائم === | ||
استخدم الصنف | استخدم الصنف <code>.list-group-flush</code> ضمن البطاقة لإنشاء مجموعة قائمة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 80: | سطر 78: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
*إضافة عنوان للقائمة بالصنف | |||
*إضافة عنوان للقائمة بالصنف <code>.card-header</code> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 119: | سطر 118: | ||
=== الترويسة والتذييل === | === الترويسة والتذييل === | ||
أضف ترويسة ( | أضف ترويسة (<code>.card-header</code>) أو تذييلًا (<code>.card-footer</code>) أو هما معًا إلى بطاقة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 133: | سطر 132: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
تُنسَّق ترويسات البطاقات بإضافة الصنف | تُنسَّق ترويسات البطاقات بإضافة الصنف <code>.card-header</code> إلى عناصر <code>[[HTML/h1-h6|<nowiki><h1>-<h6></nowiki>]]</code>. | ||
مثال عن الصنف <code>.card-header</code> مع ترويسة: | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 144: | سطر 145: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight>مثال عن الصنف <code>.card-header</code> مع اقتباس:<syntaxhighlight lang="html"> | ||
<syntaxhighlight lang="html"> | |||
<div class="card"> | <div class="card"> | ||
<div class="card-header"> | <div class="card-header"> | ||
| سطر 158: | سطر 157: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight>مثال عن الصنف <code>.card-header</code> مع دعوة إلى اتخاذ إجراء:<syntaxhighlight lang="html"> | ||
<syntaxhighlight lang="html"> | |||
<div class="card text-center"> | <div class="card text-center"> | ||
<div class="card-header"> | <div class="card-header"> | ||
| سطر 176: | سطر 173: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== ضبط | == ضبط قياس البطاقات == | ||
لا تُحدَّد | لا تُحدَّد للبطاقة في إطار العمل Bootstrap أيّة قيمة للعرض (<code>[[CSS/width|width]]</code>)، لذا فإنّها تأخذ العرض كاملًا (أي القيمة 100%) إلّا إذا حُدِّدت قيمة أخرى. يمكن التعديل على هذا السلوك بأنماط CSS مُخصَّصة، أو [[Bootstrap/grid|أصناف الشبكة Grid في Bootstrap]]، أو [[Sass/mixins|بمخاليط]] Sass الخاصّة بالشبكة أو [[Bootstrap/utilities_for_layout|الأصناف الخدميّة التي يقدّمها Bootstrap]]. | ||
=== ضبط قيّاس البطاقات بأصناف الشبكة === | === ضبط قيّاس البطاقات بأصناف الشبكة === | ||
| سطر 208: | سطر 205: | ||
=== باستخدام الأصناف الخدمية (الأدوات) === | === باستخدام الأصناف الخدمية (الأدوات) === | ||
تتوفّر مجموعة من الأدوات المفيدة ل[ضبط الأبعاد] | تتوفّر مجموعة من الأدوات المفيدة ل[[Bootstrap/sizing|ضبط الأبعاد]] في Bootstrap؛ يمكن استخدام بعضها لضبط عرض البطاقات بسرعة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 215: | سطر 212: | ||
<h5 class="card-title">عنوان البطاقة</h5> | <h5 class="card-title">عنوان البطاقة</h5> | ||
<p class="card-text">محتوى نصّي داخل البطاقة.</p> | <p class="card-text">محتوى نصّي داخل البطاقة.</p> | ||
<a href="#" class="btn btn-primary"> | <a href="#" class="btn btn-primary">زرّ</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| سطر 229: | سطر 226: | ||
=== استخدام أنماط مُخصَّصة === | === استخدام أنماط مُخصَّصة === | ||
استخدم أنماطًا مُخصَّصة ضمن ملفّات CSS أو مباشرة على | استخدم أنماطًا مُخصَّصة ضمن ملفّات CSS أو مباشرة على العنصر (inline) لتحديد عرض البطاقة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 241: | سطر 238: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== محاذاة النصّ | == محاذاة النصّ == | ||
يمكن باستخدام [أدوات النصوص] | يمكن باستخدام [[Bootstrap/text|أدوات النصوص]] التعديل بسرعة على محاذاة النصّ في أيّة بطاقة، كاملةً أو جزئيّا. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 271: | سطر 268: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== التنقّل | == التنقّل == | ||
استخدم عناصر التنقّل في Bootstrap لإضافة قابليّة التنقّل إلى ترويسة بطاقة. | استخدم عناصر التنقّل في Bootstrap لإضافة قابليّة التنقّل إلى ترويسة بطاقة. | ||
| سطر 295: | سطر 292: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight>تنسيق مختلف لقائمة التنقل للمثال السابق:<syntaxhighlight lang="html"> | ||
<syntaxhighlight lang="html"> | |||
<div class="card text-center"> | <div class="card text-center"> | ||
<div class="card-header"> | <div class="card-header"> | ||
| سطر 321: | سطر 316: | ||
== الصوّر == | == الصوّر == | ||
تتضمّن البطاقات بضع خيّارات للعمل مع الصوّر. اختر بين إضافة "قبّعات" أعلى البطاقة أو أسفلها، تغطيّة الصوّر بمحتوى | تتضمّن البطاقات بضع خيّارات للعمل مع الصوّر. اختر بين إضافة "قبّعات" (image caps) أعلى البطاقة أو أسفلها، أو تغطيّة الصوّر بمحتوى البطاقة، أو بكلّ بساطة تضمين صورة داخل البطاقة. | ||
=== القبّعات === | === القبّعات === | ||
| سطر 328: | سطر 323: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="card mb-3"> | <div class="card mb-3"> | ||
<img class="card-img-top" | <img src="..." class="card-img-top" alt="..."> | ||
<div class="card-body"> | <div class="card-body"> | ||
<h5 class="card-title">عنوان بطاقة</h5> | <h5 class="card-title">عنوان بطاقة</h5> | ||
| سطر 341: | سطر 336: | ||
<p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p> | <p class="card-text"><small class="text-muted">عُدِّل قبل 3 دقائق</small></p> | ||
</div> | </div> | ||
<img class="card-img- | <img src="..." class="card-img-top" alt="..."> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 351: | سطر 346: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="card bg-dark text-white"> | <div class="card bg-dark text-white"> | ||
<img class="card-img" | <img src="..." class="card-img" alt="..."> | ||
<div class="card-img-overlay"> | <div class="card-img-overlay"> | ||
<h5 class="card-title">عنوان البطاقة</h5> | <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> | |||
</syntaxhighlight>'''ملحوظة''': لا ينبغي أن يكون المحتوى أطول من ارتفاع الصورة. وإلا قد يُعرض خارجها. | |||
== البطاقات الأفقية == | |||
يمكن جعل البطاقات أفقية بصورة متجاوبة مع الجوالات عبر استعمال الشبكة وبعض الأصناف المساعدة. سنزيل في المثال أدناه فجوة الشبكة عبر إضافة <code>.no-gutters</code> و <code>.col-md-*</code>لجعل البطاقة أفقية عند النقطة الحدية<code>md</code>.:<syntaxhighlight lang="html"> | |||
<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> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== تنسيقات البطاقات | == تنسيقات البطاقات == | ||
تحوي البطاقات خيّاراتٍ عدّة لتخصيص الخلفيّات، والإطارات والألوان. | تحوي البطاقات خيّاراتٍ عدّة لتخصيص الخلفيّات، والإطارات والألوان. | ||
=== الخلفيّة والألوان === | === الخلفيّة والألوان === | ||
استخدم [أدوات النصوص والخلفيّة] | استخدم [[Bootstrap/colors|أدوات النصوص والخلفيّة]] لتعديل مظهر البطاقات. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> | <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> | ||
| سطر 423: | سطر 435: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight>تنبيه: توصيل المعنى إلى التقنيّات المساعدة | ||
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ | يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصنف <code>.sr-only</code>. | ||
=== الإطار === | === الإطار === | ||
استخدم [أدوات الإطارات] | استخدم [[Bootstrap/borders|أدوات الإطارات]] في Bootstrap للتعديل على لون إطار البطاقة (<code>[[CSS/border-color|border-color]]</code>). لاحظ أنّه يمكن تطبيق الأصناف <code>.text-{color}</code> على العنصُر الأب حيث يوجد الصنف <code>.card</code> أو على جزء من محتوى البطاقة كما هو موضّح في المثال التالي. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 490: | سطر 500: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
كما يمكن تغيير الإطارات على ترويسة البطاقة أو تذييلها حسب الحاجة، حتى إنّه يمكنك حذف لون الخلفيّة بالصنف | |||
=== مخاليط مساعدة === | |||
كما يمكن تغيير الإطارات على ترويسة البطاقة أو تذييلها حسب الحاجة، حتى إنّه يمكنك حذف لون الخلفيّة بالصنف <code>.bg-transparent</code>. | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 503: | سطر 515: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == مخططات البطاقات == | ||
يوفّر إطار العمل Bootstrap - علاوةً على إمكانيّة تنسيق المحتوى داخل البطاقات - بضعة خيّارات لوضع مُخطّطات لسلسلة من البطاقات. '''مُخطّطات البطاقات ليست - لحدّ الساعة - متجاوبة'''. | يوفّر إطار العمل Bootstrap - علاوةً على إمكانيّة تنسيق المحتوى داخل البطاقات - بضعة خيّارات لوضع مُخطّطات لسلسلة من البطاقات. '''مُخطّطات البطاقات ليست - لحدّ الساعة - متجاوبة'''. | ||
=== مجموعات البطاقات === | === مجموعات البطاقات === | ||
استخدم مجموعات البطاقات لعرض البطاقات مجتمعة ضمن نفس العنصُر، بحيث تكون جميع البطاقات في المجموعة ذات عرض متساو، وذات ارتفاع | استخدم مجموعات البطاقات لعرض البطاقات مجتمعة ضمن نفس العنصُر، بحيث تكون جميع البطاقات في المجموعة ذات عرض متساو، وذات ارتفاع متساوٍ كذلك. تستخدم مجموعات البطاقات الخاصيّة <code>[[CSS/display|display]]: flex;</code> للحصول على أبعاد منتظمة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 574: | سطر 586: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== رزمات البطاقات Card decks === | === رزمات البطاقات (Card decks) === | ||
هل تحتاج إلى عدّة بطاقات ذات ارتفاع متماثل وعرض متساو دون أن تكون متلاصقة؟ استخدم رزمات البطاقات. | هل تحتاج إلى عدّة بطاقات ذات ارتفاع متماثل وعرض متساو دون أن تكون متلاصقة؟ استخدم رزمات البطاقات. | ||
| سطر 637: | سطر 649: | ||
<div class="card-footer"> | <div class="card-footer"> | ||
<small class="text-muted">عُدِّل قبل 3 دقائق</small> | <small class="text-muted">عُدِّل قبل 3 دقائق</small> | ||
</div> | |||
</div> | |||
</div> | |||
</syntaxhighlight> | |||
=== شبكة البطاقات === | |||
استخدم نظام الشبكة في Bootstrap وأصناف <code>.row-cols</code> للتحكم في عدد أعمدة الشبكة (المحيطة ببطاقاتك) التي تريد عرضها في كل صف. على سبيل المثال ، الصنف <code>.row-cols-1</code> يعرض البطاقات على عمود واحد، أما <code>.row-cols-md-2</code> فيقسم أربع بطاقات بالتساوي ويعرضها على عدة صفوف ابتداء من النقطة الحدية المتوسطة.<syntaxhighlight lang="html"> | |||
<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> | |||
</syntaxhighlight> | |||
استعمل الصنف <code>.row-cols-3</code> وسترى البطاقة الرابعة مُغلّفة.<syntaxhighlight lang="html"> | |||
<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> | |||
</syntaxhighlight>إن احتجت تسوية ارتفاعات البطاقات، أضف الصنف <code>.h-100</code> إليها. إذا أردت ارتفاعات متساوية افتراضيًا ، يمكنك تعيين <code>$card-height: 100%</code> في Sass.<syntaxhighlight lang="html"> | |||
<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> | </div> | ||
| سطر 643: | سطر 777: | ||
=== أعمدة من البطاقات === | === أعمدة من البطاقات === | ||
يمكن تنظيم البطاقات في أعمدة على شاكلة مكتبة [ | يمكن تنظيم البطاقات في أعمدة على شاكلة مكتبة [https://masonry.desandro.com Masonry] بمجرّد تغليفها ضمن الصنف <code>.card-columns</code>. تعتمد البطاقات في هذه الحالة على [[:تصنيف:CSS Columns|تخطيط الأعمدة]] في CSS بدلًا من [[:تصنيف:CSS Flexbox|تخطيط Flexbox]] لمحاذاة أسهل. تُرتَّب البطاقات من الأعلى إلى الأسفل ومن اليسار إلى اليمين. | ||
'''انتبه!''' يختلف عدد البطاقات في الأعمدة، لذا يعيّن إطار العمل الخاصيّة <code>display: inline-block</code> لمنع تجزئة بطاقة على عموديْن، إذْ أنّ استخدام الخاصيّة <code>column-break-inside: avoid</code> ليس حلًّا مجرّبًا لحدّ الساعة. | |||
'''انتبه!''' يختلف عدد البطاقات في الأعمدة، لذا يعيّن إطار العمل الخاصيّة | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="card-columns"> | <div class="card-columns"> | ||
<div class="card"> | <div class="card"> | ||
<img class="card-img-top" | <img src="..." class="card-img-top" alt="..."> | ||
<div class="card-body"> | <div class="card-body"> | ||
<h5 class="card-title">عنوان بطاقة تنتقل إلى سطر جديد</h5> | <h5 class="card-title">عنوان بطاقة تنتقل إلى سطر جديد</h5> | ||
| سطر 668: | سطر 801: | ||
</div> | </div> | ||
<div class="card"> | <div class="card"> | ||
<img class="card-img-top" | <img src="..." class="card-img-top" alt="..."> | ||
<div class="card-body"> | <div class="card-body"> | ||
<h5 class="card-title">عنوان البطاقة</h5> | <h5 class="card-title">عنوان البطاقة</h5> | ||
| سطر 693: | سطر 826: | ||
</div> | </div> | ||
<div class="card"> | <div class="card"> | ||
<img class="card-img | <img src="..." class="card-img-top" alt="..."> | ||
</div> | </div> | ||
<div class="card p-3 text-right"> | <div class="card p-3 text-right"> | ||
| سطر 714: | سطر 847: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
يمكن تمديد أعمدة البطاقات وتخصيصها بشفرة إضافيّة. يوجد أدناه مثال على تمديد الصنف | يمكن تمديد أعمدة البطاقات وتخصيصها بشفرة إضافيّة. يوجد أدناه مثال على تمديد الصنف <code>.card-columns</code> باستخدام نفس خاصيّات CSS المستخدمة في إنشاء أعمدة البطاقات. | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
| سطر 726: | سطر 859: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر | == مصادر == | ||
*[ | *[https://getbootstrap.com/docs/4.5/components/card/ صفحة Cards في توثيق Bootstrap] | ||
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | |||
[[تصنيف:Bootstrap components|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 06:16، 14 يوليو 2020
يوفّر مكوِّن البطاقات 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;
}
}