در خدمت شما هستیم با آموزش Bootstrap 4 جلسه شانزدهم (Card)
آموزش Bootstrap 4 جلسه شانزدهم (Card) از سری آموزش های تک قسمتی است.
کارت (Card) چیست؟
برای آن دسته از عزیزانی که نمیدانند card چیست باید بگوییم کارت نحوه ای از نمایش محتوا است که گوگل نیز از آن استفاده میکند به عنوان مثال وقتی شما موردی را با موبایل در گوگل جستجو میکنید نتیجه را به صورت کارت میبینید.
چگونه کارت بسازیم؟
برای ساخت کارت باید از کلاس های آماده بوت استرپ استفاده کنیم . این که ما کلاس ها را در چه تگی بنویسیم زیاد مهم نیست مهم ترتیب نوشتن کلاس ها است . وقتی ما یک کارت میسازیم باکسی با حاشیه را ایجاد میکنیم برای ساخت این کادر با حاشیه از کلاس card استفاده میکنیم و محتوای که درون کادر مینویسیم را داخل کلاس card-body قرار میدهیم برای واضح شدن موضوع از کد زیر کمک بگیرید:
<div class="card"> <div class="card-body">Basic card</div> </div>
کارت با header و footer
در قسمت بالا یاد گرفتید که یک کارت ساده بسازید اگر میخواهید کارت شما هدر و فوتر داشته باشد کافیست داخل تگ با کلاس card تگی با کلاس card-header برای هدر و کلاس card-footer را برای نمایش فوتر بنویسید. توجه داشته باشید کلاس card-header قبل از card-body و کلاس card-footer بعد از card-body نوشته شود برای واضح شدن موضوع میتونید از کد زیر کمک بگیرید:
<div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div>
کلاس های رنگی در کارت ها
کارت ها هم مانند باقی موارد از کلاس های رنگی پشتیبانی میکنند برای دادن رنگ به کارت ها کافیست از کلاس های رنگی به اضافه bg استفاده کنید به عنوان مثال برای رنگ سبز کلاس bg-success را استفاده میکنیم. کلاس های رنگی را برای شما لیست کرده و هرکدام را توضیح میدهیم :
- bg-primary : این کلاس رنگ آبی را برای ما میسازد.
- bg-success : این کلاس رنگ سبز به کارت های ما میدهد
- bg-info : رنگ این کلاس آبی کمرنگ است.
- bg-warning : به کمک این کلاس میتوانید رنگ نارنجی بسازید.
- bg-danger :قرمز رنگی است که این کلاس میسازد.
- bg-secondary : به کمک این کلاس میتوانید کارت های خود را خاکستری کنید.
- bg-dark : رنگ تیره نزدیک به مشکی توسط این کلاس ساخته میشود.
- bg-light : این کلاس رنگ روشن نزدیک به سفید میسازد.
برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
ساخت کارت لینک دار
اگر میخواهید کارت هایی با قابلیت لینک بسازید میتوانید به کمک کلاس های بوت استرپ این کار را به سادگی انجام دهید کافیست در تگ a خود از کلاس card-link استفاده کنید تا لینک های شما استایل مناسبی برای کارت ها به خود بگیرند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
کارت های عکس دار
کارت های شما میتوانند قابلیت داشتن عکس را دارا باشند و بوت استرپ نیز برای این مورد کلاسی ایجاد کرده است ۲ حالت دارد شما میتوانید ابتدا تصویر را بگذارید بعد محتوا و یا برعکس اول محتوا را بگذارید بعد عکس اگر میخواهید اول عکس باشد باید از کلاس card-img-top در تگ img خود استفاده کنید و اگر میخواهید تصویر بعد محتوا بیاید باید از کلاس card-img-bottom استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
کارت های image overlay
اگر میخواهید در کارت های خود عکسی در بک گراند داشته باشید که متن روی آن نوشته شود باید از image overly استفاده کنید. بوت استرپ برای این مورد کلاسی ایجاد کرده است که باید جایگزین کلاس card-body شود کلاسی که برای این موضوع ساخته شده card-img-overlay است برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
کارت های سلولی
اگر میخواهید از کارت ها به صورت سلولی و کنار هم استفاده کنید بوت استرپ کلاسی را برای این کار فراهم کرده است کافیست div با کلاس card-columns ایجاد کنید و هر تعداد کارتی که میخواهید درون آن قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">Some text inside the fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">Some text inside the sixth card</p>
</div>
</div>
</div>
کارت های deck
قابلیت deck به شما این امکان را میدهد که کارت های خود را به صورت ستونی کنار هم بچینید برای این کار کافیست کلاس card-deck را به یک div بدهید و تمام کارت های خود را داخل آن بنویسید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
کارت های گروهی
اگر قصد دارید از کارت ها به صورت گروهی استفاده کنید امکانش توسط بوت استرپ فراهم شده است و کافیست شما از کلاس آماده آن استفاده کنید برای این کار باید جای کلاس card از کلاس card-group استفاده شود برای واضح شدن موضوع از کد زیر کمک بگیرید:
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="avatar1.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<br>
<p>Image at the bottom (card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom" src="avatar6.png" alt="Card image" style="width:100%">
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Stretched Link in Card</h2>
<p>Add the .stretched-link class to a link inside the card, and it will make the whole card clickable (the card will act as a link):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="avatar1.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Card Image Overlay</h2>
<p>Turn an image into a card background and use .card-img-overlay to overlay the card's text:</p>
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="avatar1.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Cards Columns</h2>
<p>The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">Some text inside the fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">Some text inside the sixth card</p>
</div>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Card Deck</h2>
<p>The .card-deck class creates an <strong>equal height and width</strong> grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p>In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Card Group</h2>
<p>The .card-group class is similar to .card-deck, which creates an <strong>equal height and width</strong> grid of cards.</p>
<p>However, the .card-group class removes left and right margins between each card.</p>
<p>In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px), <strong>WITH</strong> top and bottom margin:</p>
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه پانزدهم (List Groups)
آموزش Bootstrap 4 جلسه هفدهم (Dropdown)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.