3.3 KiB
3.3 KiB
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