البطاقات Bootstrap 5 Cards
-
البطاقة عبارة عن حاوية container او صندوق لمحتويات الصفحه وبكون الها padding حول مكوناتها، وتمميز بانها مرنة وقابلة للتوسيع.ويمكن اضافة headers و footers ومجموعة متنوعة من المحتوى.واكيد ممكن نتحكم ب لون الخلفية وخيارات العرض فيها.
تم تصميم Cards في Bootstrap 5 بأقل قدر ممكن من markup and styles. تم تصميمها باستخدام flexbox. والوضع الافتراضي بتكون بدون افتراضي margin، واكيد ممكن نتحكم بهاذا margin.
نطبق مثال حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<img src="avatar.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Layan Hatem</h5>
<p class="card-text">Layan Hatem, Layan Hatem Layan Hatem.</p>
<a href="#" class="btn btn-info">Go somewhere</a>
</div>
</div>
</div>
</body>
</html>
النتيجة:
نفهم الكود:
اضفنا <div> وطبقنا عليه class باسم card وطبقنا العرض 18rem باستخدام الكود:
style="width: 18rem;
وبعد هيك اضفنا صورة (اكيد لازم تحدد مكان الصورة بشكل صحيح).
وبعدها اضفنا المحتوي الى هو عبارة عن <div> طبقنا class باسم card-body عليه. وبتكون من عنوان Title ونص وزر.
الكود:
<div class="card-body">
<h5 class="card-title">Layan Hatem</h5>
<p class="card-text">Layan Hatem, Layan Hatem Layan Hatem.</p>
<a href="#" class="btn btn-info">Go somewhere</a>
</div>
تمام نحكي الان عن مكونات Content types card
تدعم البطاقات مجموعة متنوعة من المحتويات، بما في ذلك الصور والنصوص ومجموعات القوائم والروابط وغيرها. وفيما يلي أمثلة على هذه المكونات.
محتوي Body
نطبق المثال التالي :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</body>
</html>
النتيجة:
تمام نطبق الان Titles, text, and links
يمكن اضافة عنوان للبطاقة عن طريف اضافة class باسم card-title. الى h*> tag>. والروابط يتم استخدام class باسم card-link. مع a> tag> واكيد
يمكت اضافة كمان Subtitles عن طريف اضافة class باسم card-Subtitle. الى h*> tag>.
ملاحظة: عند اضافة إذا تم وضع card-title. و card-subtitle. في card-body. ، فسيتم محاذاة card title and subtitle بشكل جيد.
نطبق مثال حتى نفهم هذا الكلام:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<img src="avatar.jpg" />
<div class="card-body">
<h5 class="card-title">Layan Hatem</h5>
<h6 class="card-subtitle mb-2 text-muted">Senior Project Manager</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>
<a href="#" class="card-link">Layan Profile</a>
<a href="#" class="card-link">Send Message</a>
</div>
</div>
</div>
</body>
</html>
النتيجة:
الكود سهل جدا اضفنا <Div> وطبقنا عليه class باسم card وبعدها اضفنا الصورة(رابط مكان الصورة مهم يكون بشكل صحيح ). بعد هيك اضفنا <div> لتطبيق Body واضنفا class باسم card-body عليه وبعد هيك عملنا card-title و card-subtitle واضفنا الروابط.
طبقنا الصورة في المثال السابق بس اذا لاحظت ان ما طبقنا اي class عليها. لوضع الصورة في اعلى card بنستخدم class باسم card-img-top والي بكون مسؤول عن وضع الصورة في اعلى ال card.
طبقنا في المثال السابق class باسم card-text والي بكون المكان الي بنضيف فيه النص الى card.
نطبق Card مع List groups
يمكن انشاء List groups داخل Card.
نطبق المثال التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Layan Hatem</li>
<li class="list-group-item">Lareen Hatem</li>
<li class="list-group-item">Mlak Hatem</li>
</ul>
</div>
</div>
</body>
</html>
النتيجة:
نطبق Header و footer مع List Group
الامر بسيط جدا بتم عن طريق اضافة <div> ونطبق عليه class باسم card-header لتطبيق Header ونفس الفكره مع Footer بنطبق عليه class باسم card-footer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<div class="card-header">
DevKum Team Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Layan Hatem</li>
<li class="list-group-item">Lareen Hatem</li>
<li class="list-group-item">Mlak Hatem</li>
</ul>
<div class="card-footer">
DevKum Team footer
</div>
</div>
</div>
</body>
</html>
النتيجة:
تطبيق Kitchen sink
المقصود بهذا المصطلح (حوض المطبخ): يعني ممكن دمج ومزج أنواع محتوى متعددة لإنشاء البطاقة حسب الحاجه، في المثال التالي بنطبق مجموعة من المحتوى مثل الصور image ، النصوص text ، وlist group. كل هاي الاشياء بتكون موجوده في بطاقة واحده.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<div class="card-header">
DevKum Team Header
</div>
<img src="avatar.jpg" />
<div class="card-body">
<h5 class="card-title">Layan Hatem</h5>
<h6 class="card-subtitle mb-2 text-muted">Senior Project Manager</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>
<a href="#" class="card-link">Layan Profile</a>
<a href="#" class="card-link">Send Message</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Layan Hatem</li>
<li class="list-group-item">Lareen Hatem</li>
<li class="list-group-item">Mlak Hatem</li>
</ul>
<div class="card-footer">
DevKum Team footer
</div>
</div>
</div>
</body>
</html>
النتيجة:
تطبيق Image overlays
الفكره هون هو تطبيق النصوص فوق الصورة، بحيث تكون الصورة في الخلفية.
نطبق المثال التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card" style="width: 18rem;">
<img src="avatar.jpg" class="card-img-top" alt="Carg image" style="width:100%"/>
<div class="card-img-overlay">
<h5 class="card-title">Layan Hatem</h5>
<h6 class="card-subtitle mb-2 text-muted">Senior Project Manager</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>
<a href="#" class="card-link">Layan Profile</a>
<a href="#" class="card-link">Send Message</a>
</div>
</div>
</div>
</body>
</html>
في المثال السابق اضفنا الصورة وطبقنا عليها class باسم card-img-top وبعدها اضفنا <div> يحتوي على النص المطلوب وطبقنا عليه class باسم card-img-overlay وهو المسؤول عن عرض النص فوق الصورة.
النتيجة:
تصميم البطاقات Card styles
يمكن التعامل مع البطاقات وتطبيق مجموعه من الخصائص مثل لون الخلفيه backgrounds، الحدود borders واللون color
تطبيق backgrounds
الفكره هون باستخدام واحد من classes المسؤولة عن تطبيق لون الخلفيه وهي:
bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark
نطبق المثال التالي حتى نفهم :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team </p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
</div>
</body>
</html>
الي عملنا هون ان عملنا Card وطبقنا عليهم لون خلفيه مختلف لكل card.
النتيجة:
الحدود borders
هنا بنتلعم كيف بنغير لون الحدود الخاص ب card والفكره سهله نفس فكرة لون الخلفية عن طريق تطبيق classes الخاصة ب border
وهاي class هي :
border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<div class="card text-white border-primary mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team </p>
</div>
</div>
<div class="card text-white border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team</p>
</div>
</div>
<div class="card text-white border-success mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-white border-danger mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark border-warning mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark border-info mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-dark border-light mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-light">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
<div class="card text-white border-dark mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Card Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team, Devkum Team.</p>
</div>
</div>
</div>
</body>
</html>
النتيجة:
طبقنا هون لون للنص ولون للحدود
اترك تعليقك