کارت ها در Bootstrap تنها محفظه‌هایی ساده نیستند؛ بلکه بلوک‌های انعطاف‌پذیر برای نمایش انواع محتوا به‌صورت ساختاریافته و جذاب هستند. می‌توان آن‌ها را به‌عنوان بوم‌های قابل تنظیمی در نظر گرفت که می‌توانند از متن و تصویر ساده تا طرح‌های پیچیده با دکمه‌ها، لیست‌ها و اجزای سفارشی را در خود جای دهند. این راهنمای جامع به بررسی عمیق کارت‌های Bootstrap می‌پردازد، آناتومی، گزینه‌های استایل‌دهی، قابلیت‌های چیدمان، ویژگی‌های پیشرفته، ملاحظات دسترس‌پذیری و استراتژی‌های پیاده‌سازی خلاقانه‌ای را که فراتر از نمایش محتوای پایه هستند، بررسی می‌کند.
ساختار پایه کارت (.card)
بلوک سازنده اصلی یک کارت Bootstrap، محفظه .card است. این کلاس استایل پایه‌ای برای یک جعبه با حاشیه و سایه ملایم فراهم می‌کند.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Card</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2>Basic Card</h2>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
.card: استایل پایه محفظه کارت را تعیین می‌کند..card-body: برای افزودن فاصله داخلی به محتوای اصلی کارت استفاده می‌شود.
اجزای اصلی کارت ها در Bootstrap
Bootstrap کلاس‌های تخصصی متعددی برای ساختاردهی محتوا درون کارت ارائه می‌دهد:
.card-title: برای عنوان اصلی کارت..card-subtitle: برای عنوان فرعی یا اطلاعات پشتیبان، اغلب با.text-mutedاستایل داده می‌شود..card-text: برای متن اصلی بدنه کارت..card-link: برای لینک‌های درون بدنه کارت، با استایلی متناسب با زمینه کارت.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
.card-header: برای بخش مقدمه در بالای کارت، اغلب برای عناوین یا ناوبری استفاده می‌شود..card-footer: برای بخش پایانی در پایین کارت، اغلب برای اطلاعات اضافی، زمان‌بندی یا دکمه‌های عملیاتی استفاده می‌شود.
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
.card-img-topو.card-img-bottom: برای قرار دادن تصاویر در بالای یا پایین کارت به‌ترتیب. این کلاس‌ها اطمینان می‌دهند که تصویر به‌صورت واکنش‌گرا بزرگ یا کوچک می‌شود و شعاع حاشیه کارت حفظ می‌شود..card-img-overlay: برای قرار دادن متن یا محتوای دیگر مستقیماً روی تصویر، ایجاد ترکیب‌های بصری جذاب.
<div class="card">
<img src="https://placehold.jp/150x150.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-dark text-white">
<img src="https://placehold.jp/150x150.png" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
رنگ‌های زمینه کارت (.bg-, .text-)
مشابه با هشدارها و نشان‌ها، Bootstrap کلاس‌های رنگ زمینه متنی برای کارت‌ها ارائه می‌دهد (.bg-primary, .bg-secondary و غیره). همچنین می‌توانید از ابزارهای رنگ متن (.text-white, .text-dark) برای اطمینان از خوانایی در پس‌زمینه‌های رنگی استفاده کنید.
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
گزینه‌های چیدمان کارت
Bootstrap گزینه‌های قدرتمندی برای چیدمان کارت‌ها ارائه می‌دهد:
- گروه‌های کارت (.card-group): کارت‌ها را به‌عنوان یک عنصر متصل با ستون‌هایی که عرض برابر دارند نمایش می‌دهد. حاشیه‌ها بین کارت‌ها حذف می‌شوند و گوشه‌های بیرونی گرد اعمال می‌شوند.
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
- ستون‌های کارت (.card-columns – در Bootstrap 5 منسوخ شده، از Grid استفاده کنید): در بوت استرپ 4، .card-columns یک چیدمان شبیه به masonry ایجاد می‌کرد. در Bootstrap 5، با استفاده از سیستم Grid با کلاس‌های .row و .col-*، می‌توانید چیدمان‌های مشابهی را ایجاد کنید.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://placehold.jp/100x100.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
ناوبری کارت (.card-header-tabs, .card-header-pills)
می‌توانید تب‌های ناوبری را مستقیماً درون .card-header قرار دهید تا اجزای کارت جذابی ایجاد کنید:
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
ویژگی‌های پیشرفته کارت‌ها
تعامل با JavaScript:
کارت‌ها را می‌توان به‌صورت پویا با استفاده از JavaScript مدیریت کرد؛ مثلاً برای نمایش/پنهان کردن محتوا، اجرای انیمیشن‌ها یا واکنش به تعاملات کاربر. از پلاگین Collapse بوت‌استرپ درون کارت استفاده کنید تا بخش‌هایی قابل باز و بسته شدن ایجاد کنید.
اجزای سفارشی:
کارت‌ها می‌توانند تقریباً هر مؤلفه بوت‌استرپ یا HTML سفارشی را درون خود جای دهند و همین ویژگی آن‌ها را بسیار انعطاف‌پذیر می‌سازد. فرم‌ها، جدول‌ها، carousel یا سایر عناصر را درون .card-body جای دهید.
ملاحظات دسترس‌پذیری (Accessibility)
اطمینان از دسترس‌پذیر بودن کارت‌ها بسیار مهم است:
- ساختار معنایی: از سطوح مناسب عنوان (مانند h5 و h6) برای عنوان‌ها و زیرعنوان‌های کارت استفاده کنید.
- جایگزین‌های تصویری: برای تصاویر داخل کارت، متن جایگزین (alt) توصیفی ارائه دهید.
- شفافیت لینک‌ها: اطمینان حاصل کنید که لینک‌های داخل کارت، متنی واضح و قابل درک دارند.
- ناوبری با صفحه‌کلید: اگر کارت حاوی عناصر تعاملی مانند دکمه یا لینک است، مطمئن شوید که با صفحه‌کلید قابل دسترسی هستند.
- ویژگی‌های ARIA (برای سناریوهای پیچیده): در تعاملات پیچیده‌تر، از ویژگی‌هایی مانند
aria-labelledbyیاaria-describedbyاستفاده کنید.
استراتژی‌های پیاده‌سازی منحصربه‌فرد
فراتر از صرفاً محفظه‌های محتوا فکر کنید! کارت‌ها می‌توانند برای موارد زیر به‌کار روند:
- فهرست محصولات: نمایش اطلاعات محصول همراه با تصویر، توضیح و دکمه‌های عملکرد.
- پیش‌نمایش مقالات وبلاگ: نمایش خلاصه‌ای از مطلب به‌همراه لینک برای ادامه مطالعه.
- پروفایل کاربران: ارائه اطلاعات کلیدی کاربر و دکمه‌های مربوطه.
- ویجت‌های داشبورد: جای دادن نمودارها، آمارها یا دکمه‌های سریع عملکرد.
- پروفایل اعضای تیم: نمایش عکس، بیوگرافی و لینک شبکه‌های اجتماعی.
- جدول‌های قیمت‌گذاری: ساختاردهی سطوح مختلف قیمت با امکانات و دکمه فراخوان (CTA).
- آموزش‌های تعاملی: راهنمایی کاربران در مراحل مختلف با استفاده از متن، تصویر و دکمه درون کارت‌ها.
بهترین شیوه‌ها
- محتوا را مختصر نگه دارید: هرچند کارت‌ها انعطاف‌پذیر هستند، اما از درج اطلاعات بیش از حد در یک کارت خودداری کنید.
- سلسله‌مراتب بصری را حفظ کنید: از عنوان و زیرعنوان کارت برای هدایت چشم کاربر استفاده کنید.
- استایل‌دهی متناسب: رنگ پس‌زمینه و سبک متن را متناسب با محتوای درون کارت انتخاب کنید.
- واکنش‌گرایی: کارت‌ها به‌خوبی با اندازه‌های مختلف صفحه سازگار می‌شوند، اما طرح خود را برای دستگاه‌های مختلف بررسی کنید.
- شفافیت اولویت دارد: هدف و اطلاعات کلیدی در کارت باید به‌وضوح مشخص باشد.
نتیجه گیری
کارت ها در Bootstrap ابزارهایی قدرتمند و منعطف برای ساختاردهی و نمایش محتوا به‌صورت بصری و سازمان‌یافته هستند. با شناخت ساختار آن‌ها، استفاده از اجزای متنوع، بهره‌گیری از گزینه‌های چیدمان و رعایت اصول دسترس‌پذیری، می‌توانید فراتر از جعبه‌های ساده بروید و بوم‌هایی پویا برای تعامل بهتر کاربران بسازید. از انعطاف کارت‌ها بهره بگیرید و قابلیت‌های آن‌ها را برای ارتقاء طراحی و کارکرد برنامه‌های وب خود به‌کار ببرید.