freeCodeCamp/guide/arabic/bootstrap/cards/index.md

title	localeTitle
Cards	بطاقات

# بطاقات Bootstrap 4

• باستخدام Bootstrap 4 يمكنك إنشاء بطاقات.

• البطاقات هي مربعات متقاربة مع بعض الحشو حول المحتوى الموجود داخلها ، والتي يمكن استخدامها لعرض مجموعة معينة من المعلومات بسهولة.

لإنشاء الأساسية بطاقة التمهيد 4، تحتاج إلى إنشاء <div> حاوية مع الطبقة .card وداخل آخر <div> حاوية مع فئة .card-body

هذه هي الطريقة التي ستبدو في مستند HTML

`

Content

`

### رأس وتذييل الصفحة

يمكن تحسين هيكل البطاقة بإضافة رأس وتذييل. لإضافة أحد هذه العناصر ، يجب عليك إنشاء حاوية <div> باستخدام فئة .card-header أو .card-footer .

هذه هي الطريقة التي ستبدو في مستند HTML

`

Header content

Body content

Footer content

`

### بطاقات مع الصور

• يمكنك أيضًا استخدام فئات محددة لعرض الصور في البطاقات.

• هناك فئتان لهذا الغرض: card-img-top ، والتي تضع صورة على الجزء العلوي من البطاقة ، وبطاقة img-bottom ، والتي تضع الصورة في الأسفل ، وكلاهما يتناسبان مع الحدود المستديرة البطاقة بدقة.

• يجب استخدام هذه الفئات مع العلامة <img> داخل بطاقة للعمل بشكل صحيح.

• ضع في اعتبارك أنه إذا كنت تريد أن تمتد الصورة إلى العرض بالكامل ، فيمكنك إضافة حاوية الصورة خارج الحاوية <div> مع فئة بطاقة الجسم.

هذه هي الطريقة التي ستبدو في مستند HTML

`

Body content

Body content

`

### تراكب البطاقات

• لإنشاء صورة في خلفية البطاقة وعرض النص فوقها ، يلزمك استخدام طبقة - img-overlay على المحتوى ، الذي تريد عرضه فوق الصورة ، بدلاً من استخدام فئة بطاقة الجسم .

هذه هي الطريقة التي ستبدو في مستند HTML

`

Overlay content

`