تعتبر بطاقات Bootstrap أداة أساسية لتنظيم وعرض المحتوى في مشاريع الويب. توفر طريقة بسيطة ومتعددة الاستخدامات لإنشاء تخطيطات جذابة بصريًا تتكيف بسهولة مع أجهزة مختلفة. بحلول نهاية هذه المقالة، ستتعرف على كيفية استخدام مكونات بطاقة Bootstrap بفعالية في مشاريعك.
لماذا اختيار Bootstrap؟
يظل Bootstrap واحدًا من أكثر الأطر شيوعًا لبناء تخطيطات الويب الاستجابة والموجهة للهواتف النقالة. تشمل فوائده الرئيسية:
- تصميم استجابة سريع وسهل: تحتاج فقط إلى معرفة أساسية بـ HTML و CSS لإنشاء تخطيطات رائعة.
- نهج الهاتف النقال أولاً: يعطي Bootstrap الأولوية للاستجابة على الهواتف النقالة من البداية.
- توافق المتصفح: يعمل بسلاسة عبر جميع المتصفحات الرئيسية.
- نظام الشبكة المدعوم بـ Flexbox: يبسط مهام التوجيه والتباعد.
- مكونات شاملة: مجموعة واسعة من العناصر القابلة لإعادة الاستخدام مثل الأزرار والنوافذ النمطية والبطاقات.
تقدم النسخة الأخيرة من Bootstrap تحسينات كبيرة، مثل دعم Flexbox ومكون البطاقة المتعدد الاستخدامات، الذي يحل محل المكونات القديمة مثل الألواح والصور المصغرة.
النقاط الرئيسية
تعتبر بطاقات Bootstrap أدوات متعددة الاستخدامات لإنشاء تخطيطات منظمة ومتجاوبة. تسمح لك بعرض محتوى مختلف مثل النصوص والصور والوسائط داخل حاوية أنيقة. فيما يلي بعض الميزات الرئيسية التي تجعلها لا غنى عنها للمطورين:
- سهولة الاستخدام: يمكنك إنشاء بطاقة بسرعة عن طريق دمج عناصر مثل div class=”card-body”، الذي يحدد منطقة المحتوى، و p class=”card-text”، حيث يتواجد المعلومات النصية.
- دعم لأنواع متعددة من المحتوى: أضف عنوان بطاقة، صورًا، أو مجموعات قوائم لتنظيم محتواك بفعالية.
- الاستجابة: باستخدام الشبكة ونقاط الكسر في Bootstrap، يمكن للبطاقات التكيف مع حجم أي جهاز، من الهواتف المحمولة إلى أجهزة سطح المكتب.
- تصميم قابل للتخصيص: تتيح الفئات الفائدة لك ضبط المظهر، بما في ذلك الألوان والحدود وتوجيه النص.
- تخطيطات متقدمة: ميزات مثل مجموعات البطاقات والحزم وتخطيطات الماسونية تمكن من تنسيق وتنظيم سلس.
ما هي مكون بطاقة Bootstrap؟
يقدم Bootstrap مكون واجهة مستخدم حديث ومتعدد الاستخدامات يُدعى البطاقات، التي تعتبر حاويات مرنة وأنيقة لعرض أنواع مختلفة من المحتوى. بفضل التنسيق الافتراضي الدنيا، يمكن تعزيز بطاقات Bootstrap بسهولة باستخدام مجموعة واسعة من الفئات الفائدة.
يتم بناء هذا المكون على أساس Flexbox ، مما يسمح بالمحاذاة والتباعد الدقيق. يمكن للمطورين استخدام أدوات تباعد Bootstrap للتحكم في الهوامش والحواف بفعالية.
يمكن للبطاقات استيعاب محتوى مختلف بسهولة مثل العنوان والعنوان الفرعي ونص الجسم والصور الخ، وأقسام العنوان والتذييل الاختيارية. يمكنك أيضًا تضمين أقسام مختلفة (كتل البطاقة) لإنشاء أنواع مختلفة من البطاقات حسب استخدامك.
فئات بطاقة Bootstrap الرئيسية
فيما يلي فئات أدوات البطاقة الرئيسية في Bootstrap ، مع أغراضها:
- card: الفئة الرئيسية للحاوية التي تحدد مكون البطاقة.
- card-body: ينشئ منطقة المحتوى الأساسية داخل البطاقة.
- card-title: ينسق عنوان البطاقة ، عادةً ما يتم استخدامه مع علامات العنوان مثل <h5>.
- card-text: يستخدم للمحتوى النصي القياسي داخل البطاقة.
- card-header: يضيف قسم رأس مزود بتنسيق في أعلى البطاقة.
- card-footer: يضيف قسم تذييل مزود بتنسيق في أسفل البطاقة.
- card-img-top: يضع صورة في أعلى البطاقة.
- card-img-bottom: يضع صورة في أسفل البطاقة.
- list-group: ينشئ مجموعة قوائم داخل البطاقة.
- list-group-item: ينسق عناصر القائمة الفردية في مجموعة القائمة.
- مجموعة بطاقات: تقوم بتجميع عدة بطاقات معًا بنفس العرض والارتفاع.
- مجموعة بطاقات: تُحاذي عدة بطاقات مع تباعد، مهجورة في Bootstrap 5.
- نص-*: فئات الأدوات لتنسيق لون النص (على سبيل المثال، text-primary، text-success).
- خلفية-*: فئات الأدوات لتنسيق لون الخلفية (على سبيل المثال، bg-light، bg-dark).
يعرض هذا النظرة العامة الوجيزة الفئات الأساسية المستخدمة لبناء وتخصيص بطاقات Bootstrap.
كيفية تضمين Bootstrap في مشروعك
يمكنك بدء استخدام Bootstrap في مشروعك بسهولة عن طريق تضمينه من شبكة توزيع المحتوى (CDN) أو تنزيل الملفات اللازمة من getbootstrap.com
لهذا المثال، سنقدم كيفية إعداد صفحة HTML بسيطة باستخدام CDN لتضمين مكون البطاقة Bootstrap. تسمح لك هذه الطريقة بإنشاء وتنسيق البطاقات بسرعة دون الحاجة إلى تكوين إضافي.
اتبع الخطوات أدناه لإنشاء ملف index.html الخاص بك وتضمين Bootstrap 5.3.3:
<!doctype html>
<html lang="en">
<head>
<!-- العلامات الوسائط المطلوبة -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- باقة Bootstrap مع Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>لقد قمنا بتضمين ملفات Bootstrap عبر شبكة توزيع المحتوى CDN، مما يضمن توفر أحدث إصدار للإطار العمل دائمًا. تمت إضافة قسم حاوية ليكون كقاعدة لمحتواك، مما يتيح لك البدء في البناء باستخدام مكون البطاقة في Bootstrap على الفور.
لمزيد من التفاصيل، يمكنك استكشاف وثائق القالب الأساسي.
إنشاء بطاقات Bootstrap الأساسية
لإنشاء بطاقة بسيطة، اتبع هذه الخطوات:
- استخدم فئة .card مع علامة <div> لإنشاء الحاوية الخارجية.
- أضف فئة .card-body إلى علامة <div> داخلية لتحديد جسم البطاقة.
- استخدم فئات .card-title و .card-subtitle مع علامات العنوان (<h5> و <h6>) لإضافة عنوان وعنوان فرعي للبطاقة.
- استخدم فئة .card-text مع علامات <p> لتضمين المحتوى النصي.
- استخدم فئة .card-img-top مع علامة img لإضافة صورة في أعلى البطاقة.
هذه هي البنى الأساسية لتخطيط البطاقة الأساسي. إليك مثال:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>يُنشئ هذا الكود بطاقة تحتوي على صورة، عنوان، عنوان فرعي، نص، وزر، وسيتكيف مع عرض حاويته الأم ما لم يُحدد خلاف ذلك باستخدام الخاصية style=”width: 30rem;”.
هذه لقطة شاشة للنتيجة:
بطاقات أفقية في Bootstrap
تسمح البطاقات الأفقية بعرض المحتوى بتصميم جانبي، مما يجعلها مثالية للتصاميم المدمجة والمنظمة. يمكنك إنشاؤها باستخدام فئات الشبكة لتوفير سلوك استجابة، مما يضمن أن البطاقة تبدو رائعة على جميع الأجهزة.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>هذه لقطة شاشة للنتيجة:
مجموعات القوائم في بطاقات Bootstrap
يتيح لك Bootstrap تحسين بطاقاتك من خلال تضمين مجموعات القوائم، مما يسهل عرض المحتوى المنظم والهيكلي. تتكامل فئات list-group و list-group-flush بسلاسة ضمن البطاقات، مما يتيح للمطورين إنشاء قوائم جذابة بصريًا.
إليك كيفية إنشاء بطاقة مع مجموعة قوائم مدمجة:
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
تحسين ميزات البطاقة
إضافة رؤوس وتذييلات
يمكنك تحسين بطاقاتك عن طريق تضمين رؤوس وتذييلات باستخدام فئات .card-header و .card-footer. إليك مثال:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> هذه لقطة شاشة للنتيجة:
يضيف هذا التصميم المزيد من السياق إلى البطاقة مع رأس وتذييل مصممين.
تراكب النص على الصور
استخدم .card-img-overlay لتراكب المحتوى فوق الصورة. من خلال تبديل فئة card-body بفئة card-img-overlay، يمكننا استخدام الصورة كطبقة تراكب:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>هذه لقطة شاشة للنتيجة:
إضافة أغطية صور البطاقة
أضف صورًا في الجزء العلوي أو السفلي من البطاقة باستخدام .card-img-top أو .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>هذه لقطة شاشة للنتيجة:
تسمى الصور في الجزء العلوي والسفلي من البطاقة غطاء الصورة.
تصميم متجاوب مع بطاقات Bootstrap
يضمن التصميم المتجاوب أن تبدو بطاقاتك رائعة على جميع الأجهزة. استخدم نظام شبكة Bootstrap للتحكم في التخطيط.
كود المثال
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>هذه لقطة شاشة للنتيجة:
تعديل ارتفاع وعرض بطاقة Bootstrap
لتحديد عرض محدد لبطاقة، يمكنك استخدام سمة النمط أو فئات المساعدة الخاصة بـ Bootstrap. إليك مثال:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>هذه لقطة شاشة للنتيجة:
عرض هذه البطاقة محدود بـ 10rem، ويمكن تعديله بناءً على احتياجات تصميمك.
عادةً، سيتم تعديل ارتفاع البطاقة لتناسب عموديًا محتوى البطاقة، ولكن يمكننا أيضًا التحكم فيه باستخدام CSS مخصص (على سبيل المثال، style=” height: 10rem;”) أو أدوات قياس Bootstrap (على سبيل المثال، <div class=”card h-200″>).
يرجى ملاحظة أن الإصدار الأخير من Bootstrap قد انتقل إلى وحدات rem بدلاً من وحدات px لأن rem هي وحدة قياس قابلة للتعديل – لذا فهي تعمل بشكل أفضل مع إعدادات المستخدم، مما يجعل النص أكثر سهولة في الوصول. والنتيجة هي أن جميع العناصر في الصفحة ستتوسع مع حجم الشاشة.
يمكنك معرفة المزيد عن الميزات الجديدة لـ Bootstrap في مقال SitePoint “Bootstrap: ميزات ذكية للغاية لجذبك”.
استخدام نظام الشبكة للتحكم في العرض
خيار آخر للتحكم في عرض مكون بطاقة Bootstrap هو استخدام شبكة Bootstrap (صفوف وأعمدة):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>هذه لقطة شاشة للنتيجة:
في هذا المثال، يتم عرض بطاقتين جنبًا إلى جنب، كل منهما تأخذ أربعة أعمدة (col-md-4) على الشاشات المتوسطة والأكبر.
أنماط البطاقات
يوفر Bootstrap خيارات متنوعة لتخصيص البطاقات، بما في ذلك ألوان الخلفية، الحدود، وأنماط النص.
ألوان الخلفية والنص
يمكنك تغيير ألوان خلفية البطاقة والنص باستخدام فئات المرافق مثل .bg-primary أو .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>ألوان الحدود
استخدم .border-{color} الفئات لتخصيص لون حدود بطاقاتك. يمكن أيضًا تنسيق النص داخل البطاقة باستخدام .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>رؤوس وأقدام شفافة
قم بإزالة لون الخلفية من الرؤوس والأقدام باستخدام .bg-transparent وقم بتخصيص حدودها.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>مزج الخلفيات والحدود
قم بدمج أدوات الخلفية والحدود لتصميم فريد.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>إليك النتيجة التي تعرض أربعة أنماط مختلفة من البطاقات في تخطيط صف واحد:
يتيح لك Bootstrap إنشاء بطاقات بأنماط رأس مختلفة
- ‘عنوان البطاقة الرئيسية’ للأقسام الرئيسية
- ‘عنوان البطاقة الخفيفة’ لتصميمات دقيقة
- ‘عنوان البطاقة الثانوية’ لبطاقة مع نص داعم.
- ‘عنوان البطاقة الداكنة’ لمظهر جريء
- ‘عنوان البطاقة الناجحة’ للرسائل الإيجابية
- ‘عنوان البطاقة الخطرة’ للتحذيرات.
مع هذه الخيارات المتنوعة لتصميم البطاقات، يمكنك أيضًا إنشاء تصميمات فريدة مثل “عنوان البطاقة التحذيرية”، “عنوان البطاقة الإعلامية” لتسليط الضوء على المعلومات الهامة أو جذب الانتباه إلى تفاصيل معينة بسلاسة.
إضافة التنقل
ميزة أخرى رائعة لمكون بطاقة Bootstrap هي إمكانية إضافة أنماط تنقل متقدمة إلى قسم الرأس مثل علامات التبويب وحبوب التنقل.
إضافة علامات التبويب إلى رأس البطاقة
لتضمين علامات تبويب في رأس البطاقة، استخدم فئات .nav-tabs و .card-header-tabs على قائمة غير مرتبة (<ul>). فيما يلي مثال:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>هذه هي لقطة الشاشة للنتيجة:
إضافة أقراص إلى رأس البطاقة
بنفس الطريقة، يمكننا إضافة أقراص تنقلية عن طريق ببساطة استبدال .nav-tabs بـ.nav-pills و .card-header-tabs بـ.card-header-pill على علامة القائمة <ul>:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>هذه هي لقطة الشاشة للنتيجة:
يمكنك العثور على مزيد من المعلومات حول هذا في وثائق مكونات التنقل في Bootstrap
إضافة روابط إلى مكون البطاقة في Bootstrap
يمكننا بسرعة إضافة روابط داخل البطاقات باستخدام علامة <a> بفئة .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>هذه هي لقطة الشاشة للنتيجة:
محاذاة وتحويل النص في مكونات البطاقة في Bootstrap
توفر Bootstrap فئات الأدوات النصية لمحاذاة وتحويل النص داخل مكون بطاقة. بالنسبة لمحاذاة النص، يمكنك استخدام الفئات التالية:
- .text-start لمحاذاة النص إلى اليسار في البطاقة
- .text-end لمحاذاة النص إلى اليمين في البطاقة
- .text-center لمحاذاة النص في وسط البطاقة
- .text-justify لمحاذاة النص بالضبط في البطاقة (تطبق على الإصدارات القديمة، تم تهجيرها في Bootstrap 5)
- .text-nowrap لمنع التفاف النص
يمكنك أيضًا تحويل النص باستخدام الفئات التالية:
- .text-lowercase لتحويل النص إلى أحرف صغيرة
- .text-uppercase لتحويل النص إلى أحرف كبيرة
- .text-capitalize لجعل الحرف الأول من كل كلمة كبيرًا
تخصيص لون خلفية وواجهة وحدود مكون بطاقة Bootstrap
يمكنك تخصيص خلفية بطاقة Bootstrap والنص ولون الحدود باستخدام فئات أدوات النص والخلفية. إليك بعض الأمثلة:
- ألوان النص: استخدم .text-primary، .text-success، .text-danger، .text-warning، .text-info، .text-light، .text-dark، أو .text-white لتغيير لون النص.
- ألوان الخلفية: استخدم .bg-primary، .bg-success، .bg-danger، .bg-warning، .bg-info، .bg-light، .bg-dark، أو .bg-white لتغيير لون الخلفية.
- ألوان الحدود: استخدم .border-primary، .border-success، .border-danger، .border-warning، .border-info، .border-light، .border-dark، أو .border-white لتنسيق لون الحدود.
يعرض العرض التوضيحي في CodePen أدناه جميع أنواع البطاقات المختلفة التي يمكننا إنشاؤها باستخدام Bootstrap. لا تتردد في التجربة بنفسك:
إنشاء تخطيطات متقدمة باستخدام مكون بطاقة Bootstrap
بطاقة Bootstrap هي مكون واجهة مستخدم متعدد الاستخدامات يُستخدم على نطاق واسع في تخطيطات الويب الحديثة لعرض أنواع محتوى مختلطة (مثل النصوص والصور) ككيان واحد أو مجموعات مجمعة.
البطاقات مفيدة بشكل خاص لتصميم الاستجابة، وغالبًا ما يتم تنفيذها في تخطيطات مثل التخطيط البني، المعروف أيضًا باسم التخطيط الشبيه بـ Pinterest.
يمكن استخدام البطاقات لإنشاء تخطيطات لمعارض الصور أو مشاركات المدونة أو منتجات التجارة الإلكترونية. تستفيد المنصات الرئيسية مثل Google وFacebook بشكل كبير من البطاقات لتنظيم وعرض المحتوى على تطبيقاتها على الويب.
سابقًا، كان بناء تصميمات متقدمة من هذا القبيل يتطلب معرفة عميقة بـ CSS و HTML. ومع ذلك، مع ميزات Bootstrap الأخيرة، يمكن للمطورين إنشاء تصميمات تعتمد على البطاقات بشكل سهل وجذاب بصريًا.
تبسيط العملية في تنظيم البطاقات مع تنسيق ومحاذاة متسقين.
تجميع/تضمين البطاقات
مجموعات البطاقات في Bootstrap هي طريقة فعالة لعرض عدة مكونات بطاقة ككيان واحد متصل بعرض وارتفاع موحّدَين.
يتم تحقيق هذا التخطيط باستخدام خاصية display: flex؛ لضمان توازن جميع البطاقات. إنها مفيدة بشكل خاص لتصميم الاستجابة وتخطيطات الويب الحديثة حيث تكون أبعاد البطاقات المتسقة ضرورية.
لإنشاء مجموعة من البطاقات، استخدم فئة .card-group كـ div المحيط الذي يحتوي على بطاقات فردية.
إليك مثال يعرض مجموعة من ثلاث بطاقات:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>هذه لقطة شاشة للنتيجة:
كما يمكن رؤيته، فإن البطاقات الثلاثة متصلة ولها نفس العرض والارتفاع.
أطقم البطاقات
في الإصدارات السابقة من Bootstrap، تم استخدام .card-deck لإنشاء تخطيطات البطاقات حيث كانت البطاقات لها نفس العرض والارتفاع لكنها لم تكن متصلة ببعضها البعض. ومع ذلك، في Bootstrap 5، يُوصى باستخدام نظام الشبكة لهذا الغرض. توفر هذه الطريقة مرونة واستجابة أكبر.
للحصول على تخطيط مشابه، استخدم فئة .row مع .col للتحكم في تباعد البطاقات ومحاذاتها. إليك مثال:
<div class="row row-cols-1 row-cols-md-3 g-4">
كما نرى، فإن البطاقات بنفس الحجم مع وجود بعض الهوامش بينها.
أعمدة البطاقات
في الإصدارات السابقة من Bootstrap، تم استخدام فئة .card-columns لإنشاء تخطيط شبيه بالماسونري حيث كانت البطاقات تُضاف من الأعلى إلى الأسفل ومن اليسار إلى اليمين. ومع ذلك، في Bootstrap 5، تمت إزالة هذه الميزة.
لتحقيق تخطيط مشابه، يمكنك استخدام نظام الشبكة بالاشتراك مع تخطيط CSS Masonry أو مكون إضافي JavaScript مثل Masonry.js لسلوكيات أكثر تعقيدًا.
إليك كيفية إنشاء تخطيط بسيط بأسلوب الماسونري باستخدام نظام الشبكة وCSS:
تحسين الأداء
الأداء الفعال أمر حيوي لإنشاء بطاقات Bootstrap التي تُحمّل بسرعة وتتكيف بسلاسة. إليك تقنيات عملية لتعزيز الأداء أثناء دمج مكونات بطاقة Bootstrap مثل div class card body وh5 class card title.
تحميل الصور بشكل كسول
يؤجل التحميل الكسول تحميل الصور حتى تصبح مرئية في نافذة العرض، مما يحسن سرعة الصفحة. استخدم السمة loading=”lazy” مع card img top كحل فعال.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">تحسين أحجام الصور
قم بتغيير حجم الصور لتناسب أبعاد الحاوية الخاصة بها، مما يضمن أوقات تحميل أسرع. استخدم img-fluid مع div class card img لتغيير حجم الصور تلقائيًا.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">هذا يضمن أن card img top يتناسب تمامًا، بغض النظر عن عرض العنصر الأب.
تقليل CSS و JavaScript
قم بتقليل الأنماط والسكربتات لتقليل أحجام الملفات. اجمع بين عناصر div class card header متعددة وقلل من CSS المخصص لتحسين سرعة العرض.
مثال مُحسن
بدلاً من تطبيق أنماط متكررة أو مخصصة مثل هذا:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>استخدم فئات المرافق الخاصة بـ Bootstrap لهيكل أنظف وأسهل في الصيانة:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>استخدم SVGs للرموز
تعتبر SVGs خفيفة الوزن وقابلة للتوسع، مما يجعلها مثالية لرؤوس البطاقات والعناصر الزخرفية. يتم تحميلها بشكل أسرع وتحافظ على وضوحها عبر الأجهزة.
مثال
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>تحميل مسبق واستباقي للموارد
استخدم rel=”preload” لتحميل الموارد الحيوية و rel=”prefetch” لتوقع الاحتياجات المستقبلية. هذا مفيد بشكل خاص لمحتوى البطاقات الثقيلة.
مثال
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">تقليل تعقيد DOM
تجنب هياكل div class card المتداخلة بشكل مفرط التي يمكن أن تبطئ العرض. قم بتبسيط التخطيطات لتحسين الأداء.
قبل التحسين
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>بعد التحسين
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>تحسين الخطوط
قم بتحميل الخطوط المخصصة مسبقًا أو استخدم الخطوط النظامية لتقليل زمن الاستجابة. يمكن أن تبرز فئة البطاقة النظيفة جمال بطاقاتك بشكل أكبر.
مثال
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>الخاتمة
يعتبر مكون بطاقة Bootstrap إضافة قوية إلى إطار عمل Bootstrap، مما يسمح للمطورين بإنشاء صفحات ويب ذات تصميم عصري دون الحاجة للغوص عميقًا في كيفية عمل CSS. يمكنك إضافة تخطيطات بطاقات لتمثيل معارض الصور، وعناصر واجهة التحكم في لوحات المعلومات، وعرض المنشورات المدونة أو المنتجات لموقع التجارة الإلكترونية عن طريق إضافة فئات CSS.
نتيجةً للميزات الجديدة والمكونات، يواصل Bootstrap أن يكون إطار عمل CSS قوي متاح للجميع، وخاصةً للمطورين الذين يحتاجون إلى إنشاء تخطيطات استجابة وعصرية خاصة بهم ولكنهم يفتقرون إلى الوقت والميزانية الكافية أو المعرفة العميقة بـ CSS اللازمة لإنتاج كود مخصص.
إذا كنت قد اتقنت أساسيات Bootstrap ولكنك تتساءل كيف تأخذ مهاراتك في Bootstrap إلى المستوى التالي، تحقق من بناء موقعك الأول باستخدام Bootstrap 4 كورس للحصول على مقدمة سريعة وممتعة عن قوة Bootstrap.
الأسئلة الشائعة حول إتقان مكونات بطاقة Bootstrap لتصميم استجابة
ما هو مكون بطاقة Bootstrap؟
تعتبر مكون بطاقة Bootstrap Card تحتوي على سعة حديثة ومرنة للمحتوى، مما يمكنك من إنشاء تخطيطات جذابة بصريًا للنصوص والصور ووسائط متعددة. تعتبر البطاقات جزءًا من إطار عمل Bootstrap، مصممة لمساعدة المطورين على تنظيم المعلومات بطريقة تتجاوب مع الأجهزة النقالة وتكون ودية تمامًا.
كيف يمكنني إنشاء مكون بطاقة Bootstrap Card؟
إن إنشاء مكون بطاقة Bootstrap Card أمر مباشر. يمكنك استخدام div بفئة card كحاوية وإضافة محتوى مثل العناوين والنصوص والصور داخله. إليك مثال:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>كيف يمكنني تحديد ارتفاع وعرض البطاقة في Bootstrap؟
يمكنك تخصيص عرض وارتفاع بطاقة Bootstrap باستخدام أنماط مضمنة أو فئات أدوات Bootstrap. على سبيل المثال:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>بالإضافة إلى ذلك، يمكنك أيضًا استخدام فئات أدوات بطاقة ارتفاع Bootstrap مثل w-50 أو h-100 لتحديد أبعاد البطاقة بشكل متجاوب.
كيف يمكنني تغيير حجم البطاقة في Bootstrap؟
لتغيير حجم البطاقة، يمكنك استخدام فئات أدوات حجم بطاقة Bootstrap مثل w-25 و w-50 و w-75 للعرض، و h-auto أو h-100 للارتفاع. يضمن ذلك أن تتكيف بطاقتك مع التخطيط دون الحاجة إلى CSS إضافي. إليك مثال:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>كيف يمكنني إنشاء عنوان بطاقة في Bootstrap؟
لاضافة عنوان الى بطاقتك، استخدم عنصر <h5> مع الفئة “card-title”. تضمن هذه الفئة أن يتم تنسيق العنوان بشكل متسق مع معايير تصميم Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>كيف يمكنني استخدام فئة card-body في Bootstrap؟
فئة card-body هي فئة مساعدة توفر الحشوة وتنظم المحتوى داخل بطاقة Bootstrap. إنها الحاوية الرئيسية لمحتوى البطاقة.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>كيف أصلح حجم بطاقة Bootstrap؟
لإصلاح حجم البطاقة، قم بتطبيق عرض وارتفاع محددين باستخدام أنماط داخلية أو فئات مساعدة. على سبيل المثال:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>كيف يمكنني ضبط حجم البطاقة في Bootstrap؟
يمكن ضبط حجم البطاقة ديناميكيًا باستخدام فئات Bootstrap المساعدة أو CSS Grid. إليك مثال على حجم بطاقة مستجيب:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>هل يمكنني تخصيص خلفيات وحدود بطاقة Bootstrap؟
نعم، يقدم Bootstrap فئات مساعدة واسعة للتخصيص. استخدم bg-primary لألوان الخلفية وborder-success لتنسيق الحدود. مثال:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>كيف يمكنني استخدام الصور مع البطاقات؟
يدعم Bootstrap الصور داخل البطاقات باستخدام card-img-top أو card-img-bottom. مثال:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>كيف أستخدم فئة div card body في Bootstrap؟
تحدد فئة div card body في Bootstrap منطقة المحتوى الرئيسية داخل البطاقة. توفر الحشوة وتضمن تباعدًا متسقًا للنصوص والصور وعناصر أخرى داخل البطاقة.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>ما هي فئة p card text في Bootstrap؟
تستخدم فئة p card text في Bootstrap لتنسيق المحتوى النصي داخل جسم البطاقة. تطبق أنماط الطباعة الافتراضية لجعل النص يبدو نظيفًا واحترافيًا.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>كيف يمكنني زيادة حجم البطاقة في Bootstrap؟
لزيادة حجم البطاقة، قم بضبط عرضها وارتفاعها باستخدام w-100 للعرض الكامل أو تحديد الأبعاد باستخدام الأنماط. مثال:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>كيف يمكنني جعل البطاقات بنفس الارتفاع؟
استخدم .d-flex و .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/