الدرس التاسع: بطاقات (Cards) في Bootstrap
البطاقات (Cards) هي أحد العناصر الشائعة في تصميم واجهات المستخدم، وتتيح لك عرض المحتوى بشكل منظم وجذاب. في Bootstrap، توفر فئات جاهزة لإنشاء بطاقات متجاوبة تحتوي على صور، نصوص، أزرار، وعناصر أخرى. في هذا الدرس، سنتعلم كيفية إنشاء بطاقات باستخدام الفئة .card، وكيفية إضافة نصوص وصور وأزرار داخل البطاقة. سنتعرف أيضًا على كيفية تخصيص البطاقة باستخدام الفئات المدمجة مثل .card-body, .card-title, و .card-footer.
1. إنشاء بطاقات باستخدام الفئة .card
الفئة الأساسية لإنشاء البطاقة في Bootstrap هي .card. هذه الفئة توفر إطارًا عامًا لاحتواء المحتوى داخل البطاقة، ويمكنك تخصيص البطاقة باستخدام الفئات المختلفة التي يوفرها Bootstrap.
أ. الهيكل الأساسي للبطاقة
الهيكل الأساسي لبطاقة يحتوي على ثلاثة عناصر رئيسية:
- الصورة (إذا كانت البطاقة تحتوي على صورة).
- المحتوى (نصوص وأزرار).
- التذييل (footer) – إذا رغبت في إضافة معلومات إضافية في أسفل البطاقة.
مثال عملي:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" 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لإنشاء البطاقة. - تم إضافة صورة باستخدام الفئة
.card-img-topلتكون الصورة في الجزء العلوي من البطاقة. - داخل البطاقة، تم إضافة نصوص باستخدام الفئة
.card-body، والتي تحتوي على العنوان (.card-title) والنصوص (.card-text). - تم إضافة زر باستخدام الفئة
.btn btn-primaryفي أسفل البطاقة.
2. إضافة نصوص وصور داخل البطاقة
يمكنك تخصيص البطاقة لتحتوي على مختلف أنواع المحتوى مثل الصور والنصوص والأزرار. Bootstrap يتيح لك إضافة الصور داخل البطاقة بشكل سهل من خلال الفئة .card-img-top للصور التي توجد في الجزء العلوي من البطاقة، أو الفئة .card-img-bottom إذا كنت ترغب في وضع الصورة في أسفل البطاقة.
أ. إضافة صورة في الجزء العلوي
يمكنك إضافة صورة في الجزء العلوي من البطاقة باستخدام الفئة .card-img-top، كما فعلنا في المثال السابق. يمكنك استخدام رابط لصورة أو صورة محلية في السمة src.
مثال عملي:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/300" 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-img-bottom.
مثال عملي:
<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>
<img src="https://via.placeholder.com/150" class="card-img-bottom" alt="صورة البطاقة السفلى">
</div>
3. تخصيص البطاقة باستخدام الفئات مثل .card-body, .card-title, .card-footer
يمكنك تخصيص بطاقتك بشكل أكبر باستخدام فئات إضافية توفرها Bootstrap، مثل .card-body, .card-title, و .card-footer، لتنسيق محتويات البطاقة بشكل منظم وجذاب.
أ. تخصيص محتوى البطاقة باستخدام .card-body
الفئة .card-body تحتوي على المحتوى الرئيسي داخل البطاقة، بما في ذلك النصوص والعناوين والأزرار. يمكنك وضع جميع المحتويات التي تريد عرضها داخل هذه الفئة.
مثال عملي:
<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-success">تعرف أكثر</a>
</div>
</div>
ب. تخصيص عنوان البطاقة باستخدام .card-title
الفئة .card-title تستخدم لتنسيق العنوان داخل البطاقة. يمكنك إضافة عناوين باستخدام هذه الفئة، حيث تجعل النص بارزًا وواضحًا.
مثال عملي:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" 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-footer
الفئة .card-footer تُستخدم لإضافة تذييل للبطاقة، حيث يمكن وضع معلومات إضافية مثل التاريخ أو روابط أو ملاحظات. التذييل عادةً ما يكون في أسفل البطاقة.
مثال عملي:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" 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 class="card-footer text-muted">
تم التحديث في 24 سبتمبر 2024
</div>
</div>
- تم استخدام الفئة
.card-footerلإضافة تذييل في أسفل البطاقة يحتوي على نص مضاف.
4. أنواع البطاقة المتقدمة في Bootstrap
يقدم Bootstrap أيضًا إمكانيات لتخصيص البطاقة بشكل متقدم، مثل استخدام فئات مثل .card-header, .card-group, و .card-deck لتنسيق البطاقة بشكل أكثر مرونة.
أ. .card-header
تُستخدم الفئة .card-header لإضافة رأس (header) للبطاقة. عادة ما يحتوي الرأس على عنوان أو شريط مميز في الأعلى.
مثال عملي:
<div class="card" style="width: 18rem;">
<div class="card-header">
العنوان الرئيسي
</div>
<img src="https://via.placeholder.com/150" 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-group و .card-deck
يمكنك تنظيم مجموعة من البطاقات باستخدام الفئات .card-group و .card-deck. الفئة .card-deck تتيح لك إضافة بطاقات ضمن صفوف متساوية المسافات، بينما .card-group تنظم البطقات بشكل جيد ولكن مع تباعد ثابت بينها.
مثال عملي:
<div class="card-group">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" 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>
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة الثانية</h
5> نص البطاقة الثانية. رابط البطاقة الثانية
الخاتمة:
لقد تعلمنا في هذا الدرس كيفية استخدام بطاقات Bootstrap لإنشاء واجهات جذابة ومتجاوبة، وكيفية تخصيصها باستخدام الفئات المختلفة مثل .card-body, .card-title, .card-footer، بالإضافة إلى إضافة صور وأزرار داخل البطاقة. هذه البطاقة تعد من العناصر المرنة التي يمكن تخصيصها بسهولة لتناسب احتياجات تصميمك.
