BenoService

آکادمی بنو/آموزش Bootstrap

Card، List Group و Badge در Bootstrap

بهنام نوبخت · ۱۴۰۵/۷/۱۲

در طراحی رابط کاربری، معمولاً لازم است اطلاعات مختلف را به شکل مرتب و قابل فهم نمایش دهیم. برای مثال ممکن است بخواهیم مشخصات یک محصول، اطلاعات یک کاربر، قیمت یک سرویس، فهرستی از فعالیت‌های اخیر یا وضعیت یک سفارش را نمایش دهیم. اگر این اطلاعات بدون ساختار مناسب در صفحه قرار بگیرند، رابط کاربری شلوغ و غیرحرفه‌ای خواهد شد. Bootstrap برای حل این مسئله کامپوننت‌هایی مانند Card، List Group و Badge را در اختیار ما قرار می‌دهد. Card برای نمایش اطلاعات مرتبط در یک کادر مستقل بسیار کاربردی است، List Group برای نمایش مجموعه‌ای از آیتم‌ها و Badge برای نمایش وضعیت، برچسب، تعداد یا اطلاعات کوتاه استفاده می‌شود. در این مقاله ابتدا ساختار Card را یاد می‌گیریم، سپس با List Group و Badge آشنا می‌شویم و در ادامه این سه کامپوننت را با یکدیگر ترکیب می‌کنیم تا نمونه‌هایی شبیه بخش‌های واقعی یک سایت فروشگاهی، داشبورد مدیریتی و پنل کاربری ایجاد کنیم.

Card چیست؟

Card یکی از پرکاربردترین کامپوننت‌های Bootstrap است که برای نمایش یک مجموعه اطلاعات مرتبط در یک بخش مستقل استفاده می‌شود.

برای مثال می‌توانیم اطلاعات یک محصول را داخل Card قرار دهیم:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">لپ‌تاپ حرفه‌ای</h5>
        <p class="card-text">
            یک لپ‌تاپ مناسب برای برنامه‌نویسی و کارهای حرفه‌ای.
        </p>
        <a href="#" class="btn btn-primary">مشاهده محصول</a>
    </div>
</div>

ساختار کلی Card را می‌توان به شکل زیر تصور کرد:

+-----------------------------+
|           Header            |
+-----------------------------+
|                             |
|            Body             |
|                             |
|       Title + Content       |
|                             |
+-----------------------------+
|           Footer            |
+-----------------------------+

البته همه Cardها الزاماً Header و Footer ندارند.

ساختار پایه Card

ساده‌ترین ساختار Card به شکل زیر است:

<div class="card">
    <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

card-body

بخش اصلی Card

card-title

عنوان

card-text

متن

card-header

Header

card-footer

Footer

card-img-top

تصویر بالای Card

card-img-bottom

تصویر پایین Card

card-img-overlay

قرار دادن محتوا روی تصویر

Card Header

برای ایجاد Header در Card از card-header استفاده می‌کنیم:

<div class="card">
    <div class="card-header">
        اطلاعات حساب
    </div>

    <div class="card-body">
        <h5 class="card-title">حساب کاربری</h5>

        <p class="card-text">
            اطلاعات حساب کاربری شما در این بخش قرار دارد.
        </p>
    </div>
</div>

Header می‌تواند برای نمایش عنوان یک بخش بسیار مناسب باشد.

Card Footer

برای ایجاد Footer از card-footer استفاده می‌کنیم:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">سفارش شماره 1025</h5>

        <p class="card-text">
            سفارش شما در حال پردازش است.
        </p>
    </div>

    <div class="card-footer">
        آخرین بروزرسانی: امروز
    </div>
</div>

Footer معمولاً برای اطلاعات تکمیلی، تاریخ، وضعیت یا عملیات استفاده می‌شود.

Card همراه با تصویر

یکی از کاربردهای بسیار رایج Card، نمایش تصویر محصول است.

<div class="card">
    <img
        src="https://picsum.photos/600/350"
        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-top باعث می‌شود تصویر در قسمت بالایی Card قرار بگیرد.

تصویر در پایین Card

در صورت نیاز می‌توانیم تصویر را در پایین قرار دهیم:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">عنوان محصول</h5>

        <p class="card-text">
            توضیحات محصول در این قسمت قرار می‌گیرد.
        </p>
    </div>

    <img
        src="https://picsum.photos/600/300"
        class="card-img-bottom"
        alt="تصویر محصول"
    >
</div>

Card با تصویر پس‌زمینه

Bootstrap امکان قرار دادن محتوا روی تصویر را نیز فراهم می‌کند.

برای این کار از card-img-overlay استفاده می‌کنیم:

<div class="card text-bg-dark">
    <img
        src="https://picsum.photos/800/400"
        class="card-img"
        alt="تصویر طبیعت"
    >

    <div class="card-img-overlay">
        <h5 class="card-title">
            سفر به طبیعت
        </h5>

        <p class="card-text">
            یک تجربه متفاوت در دل طبیعت.
        </p>
    </div>
</div>

در این حالت متن روی تصویر قرار می‌گیرد.

تغییر اندازه و ارتفاع Card

Card به صورت پیش‌فرض اندازه مشخصی ندارد و معمولاً بر اساس محتوای خود اندازه می‌گیرد.

می‌توانیم از Utilityهای Bootstrap برای کنترل اندازه استفاده کنیم.

مثلاً:

<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">Card</h5>
        <p class="card-text">
            یک کارت با عرض 75 درصد.
        </p>
    </div>
</div>

برای Cardهایی که در یک ردیف قرار دارند و می‌خواهیم ارتفاع یکسانی داشته باشند، h-100 بسیار کاربردی است:

<div class="card h-100">
    <div class="card-body">
        <h5 class="card-title">محصول</h5>
        <p class="card-text">
            توضیحات محصول.
        </p>
    </div>
</div>

Card با Border و Shadow

می‌توانیم از Utilityهای Bootstrap برای ایجاد ظاهر متفاوت استفاده کنیم:

<div class="card border-primary shadow">
    <div class="card-body">
        <h5 class="card-title">حساب ویژه</h5>

        <p class="card-text">
            امکانات بیشتری برای کاربران ویژه.
        </p>
    </div>
</div>

همچنین می‌توان از رنگ‌های مختلف Border استفاده کرد:

<div class="card border-success">
    ...
</div>

یا:

<div class="card border-danger">
    ...
</div>

رنگ پس‌زمینه Card

Bootstrap امکان استفاده از کلاس‌های رنگی را نیز فراهم می‌کند:

<div class="card text-bg-primary">
    <div class="card-body">
        <h5 class="card-title">اطلاعات</h5>
        <p class="card-text">
            یک پیام مهم.
        </p>
    </div>
</div>

نمونه‌های دیگر:

<div class="card text-bg-success">
    ...
</div>

<div class="card text-bg-warning">
    ...
</div>

<div class="card text-bg-danger">
    ...
</div>

<div class="card text-bg-dark">
    ...
</div>

ساخت Card محصول

یکی از بهترین روش‌های یادگیری Card، ساخت یک کارت واقعی محصول است:

<div class="card h-100 shadow-sm">

    <img
        src="https://picsum.photos/500/300?random=10"
        class="card-img-top"
        alt="گوشی هوشمند"
    >

    <div class="card-body">

        <h5 class="card-title">
            گوشی هوشمند
        </h5>

        <p class="card-text">
            گوشی با طراحی مدرن و امکانات مناسب.
        </p>

        <h6 class="mb-3">
            25,000,000 تومان
        </h6>

        <a href="#" class="btn btn-primary w-100">
            مشاهده محصول
        </a>

    </div>
</div>

ساخت چند Card با Grid

معمولاً Cardها به صورت تکی استفاده نمی‌شوند و چند Card در کنار یکدیگر قرار می‌گیرند.

برای این کار می‌توانیم از Grid استفاده کنیم:

<div class="container">

    <div class="row g-4">

        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
                ...
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
                ...
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
                ...
            </div>
        </div>

    </div>

</div>

در موبایل Cardها یک‌ستونه هستند و در اندازه‌های بزرگ‌تر کنار هم قرار می‌گیرند.

Card افقی

گاهی به جای Card عمودی، یک Card افقی می‌خواهیم.

برای این کار می‌توانیم Grid و row g-0 را ترکیب کنیم:

<div class="card mb-3">
    <div class="row g-0">

        <div class="col-md-4">
            <img
                src="https://picsum.photos/500/400"
                class="img-fluid rounded-start"
                alt="محصول"
            >
        </div>

        <div class="col-md-8">
            <div class="card-body">

                <h5 class="card-title">
                    محصول ویژه
                </h5>

                <p class="card-text">
                    توضیحات محصول در این قسمت قرار می‌گیرد.
                </p>

                <a href="#" class="btn btn-primary">
                    مشاهده
                </a>

            </div>
        </div>

    </div>
</div>

این مدل برای صفحات محصول، خبرها و پروفایل‌ها بسیار کاربردی است.

Card پروفایل کاربر

Card فقط برای محصولات نیست.

می‌توانیم برای پروفایل کاربر نیز از آن استفاده کنیم:

<div class="card text-center shadow-sm">

    <div class="card-body">

        <img
            src="https://i.pravatar.cc/120"
            class="rounded-circle mb-3"
            width="120"
            height="120"
            alt="تصویر کاربر"
        >

        <h5 class="card-title">
            علی رضایی
        </h5>

        <p class="text-body-secondary">
            توسعه‌دهنده وب
        </p>

        <p class="card-text">
            علاقه‌مند به طراحی سایت و برنامه‌نویسی.
        </p>

        <a href="#" class="btn btn-primary">
            مشاهده پروفایل
        </a>

    </div>

</div>

Card قیمت‌گذاری

Card یکی از گزینه‌های مناسب برای ساخت Pricing Section است:

<div class="card text-center shadow-sm">

    <div class="card-header">
        پلن حرفه‌ای
    </div>

    <div class="card-body">

        <h2 class="card-title">
            499,000 تومان
        </h2>

        <p class="text-body-secondary">
            ماهانه
        </p>

        <p class="card-text">
            مناسب برای کسب‌وکارهای حرفه‌ای.
        </p>

        <a href="#" class="btn btn-primary">
            انتخاب پلن
        </a>

    </div>

</div>

Card Group

Bootstrap دارای کامپوننت card-group نیز است:

<div class="card-group">

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">پلن اول</h5>
            <p class="card-text">توضیحات پلن اول.</p>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">پلن دوم</h5>
            <p class="card-text">توضیحات پلن دوم.</p>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">پلن سوم</h5>
            <p class="card-text">توضیحات پلن سوم.</p>
        </div>
    </div>

</div>

card-group برای گروه‌بندی Cardها مناسب است، اما در بسیاری از پروژه‌های واقعی استفاده از Grid انعطاف بیشتری به ما می‌دهد؛ زیرا کنترل بیشتری روی تعداد ستون‌ها در اندازه‌های مختلف صفحه داریم.

List Group چیست؟

List Group برای نمایش مجموعه‌ای از آیتم‌های مرتبط استفاده می‌شود.

برای مثال:

<ul class="list-group">
    <li class="list-group-item">
        داشبورد
    </li>

    <li class="list-group-item">
        پروفایل
    </li>

    <li class="list-group-item">
        سفارش‌ها
    </li>

    <li class="list-group-item">
        تنظیمات
    </li>
</ul>

خروجی مفهومی آن:

+----------------------+
| Dashboard            |
+----------------------+
| Profile              |
+----------------------+
| Orders               |
+----------------------+
| Settings             |
+----------------------+

List Group با لینک

می‌توانیم به جای li از لینک استفاده کنیم:

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">
        داشبورد
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        سفارش‌ها
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        تنظیمات
    </a>

</div>

کلاس list-group-item-action باعث می‌شود آیتم برای تعامل کاربر مناسب‌تر باشد.

Active در List Group

برای مشخص کردن آیتم فعال:

<div class="list-group">

    <a
        href="#"
        class="list-group-item list-group-item-action active"
        aria-current="true"
    >
        داشبورد
    </a>

    <a
        href="#"
        class="list-group-item list-group-item-action"
    >
        سفارش‌ها
    </a>

</div>

این روش برای Sidebarها و منوهای داخلی بسیار کاربردی است.

Disabled در List Group

اگر بخواهیم یک آیتم غیرفعال باشد:

<div class="list-group">

    <a
        href="#"
        class="list-group-item list-group-item-action disabled"
        aria-disabled="true"
    >
        این بخش فعال نیست
    </a>

</div>

List Group بدون حاشیه

با list-group-flush می‌توانیم حاشیه بیرونی List Group را حذف کنیم:

<ul class="list-group list-group-flush">

    <li class="list-group-item">
        پیام‌ها
    </li>

    <li class="list-group-item">
        اعلان‌ها
    </li>

    <li class="list-group-item">
        تنظیمات
    </li>

</ul>

این مدل مخصوصاً داخل Card بسیار کاربردی است.

List Group شماره‌دار

Bootstrap امکان ساخت لیست شماره‌دار را نیز فراهم می‌کند:

<ol class="list-group list-group-numbered">

    <li class="list-group-item">
        ثبت‌نام
    </li>

    <li class="list-group-item">
        تکمیل پروفایل
    </li>

    <li class="list-group-item">
        فعال‌سازی حساب
    </li>

</ol>

List Group افقی

در صورت نیاز می‌توان آیتم‌ها را در یک ردیف قرار داد:

<ul class="list-group list-group-horizontal">

    <li class="list-group-item">
        خانه
    </li>

    <li class="list-group-item">
        محصولات
    </li>

    <li class="list-group-item">
        تماس
    </li>

</ul>

همچنین می‌توان رفتار آن را از یک breakpoint مشخص تغییر داد:

<ul class="list-group list-group-horizontal-md">
    ...
</ul>

یعنی در اندازه‌های کوچک‌تر لیست حالت عمودی داشته باشد و از md به بعد افقی شود.

رنگ‌بندی List Group

می‌توان برای آیتم‌های مختلف وضعیت‌های متفاوتی ایجاد کرد:

<ul class="list-group">

    <li class="list-group-item">
        سفارش ثبت شد
    </li>

    <li class="list-group-item list-group-item-success">
        پرداخت موفق بود
    </li>

    <li class="list-group-item list-group-item-warning">
        منتظر بررسی
    </li>

    <li class="list-group-item list-group-item-danger">
        پرداخت ناموفق
    </li>

</ul>

Badge چیست؟

Badge برای نمایش اطلاعات کوتاه مانند وضعیت، تعداد، دسته‌بندی یا برچسب استفاده می‌شود.

برای مثال:

<span class="badge text-bg-primary">
    جدید
</span>

یا:

<span class="badge text-bg-success">
    فعال
</span>

Badge به شکل Pill

با rounded-pill می‌توان Badge را به شکل قرص ایجاد کرد:

<span class="badge rounded-pill text-bg-primary">
    جدید
</span>

نمونه دیگر:

<span class="badge rounded-pill text-bg-success">
    فعال
</span>

Badge در عنوان

Badge می‌تواند کنار عنوان قرار بگیرد:

<h5>
    محصولات
    <span class="badge text-bg-secondary">
        12
    </span>
</h5>

این روش برای نمایش تعداد بسیار کاربردی است.

Badge در دکمه

می‌توان Badge را داخل Button قرار داد:

<button class="btn btn-primary">
    پیام‌ها

    <span class="badge text-bg-light">
        5
    </span>
</button>

در این حالت کاربر متوجه می‌شود که 5 پیام جدید دارد.

Badge برای وضعیت سفارش

<span class="badge text-bg-warning">
    در حال پردازش
</span>

یا:

<span class="badge text-bg-success">
    تکمیل شده
</span>

و:

<span class="badge text-bg-danger">
    لغو شده
</span>

ترکیب List Group و Badge

یکی از کاربردهای بسیار رایج، نمایش Badge داخل List Group است:

<ul class="list-group">

    <li class="list-group-item d-flex justify-content-between align-items-center">

        پیام‌های جدید

        <span class="badge rounded-pill text-bg-primary">
            8
        </span>

    </li>

    <li class="list-group-item d-flex justify-content-between align-items-center">

        سفارش‌ها

        <span class="badge rounded-pill text-bg-success">
            3
        </span>

    </li>

    <li class="list-group-item d-flex justify-content-between align-items-center">

        اعلان‌ها

        <span class="badge rounded-pill text-bg-danger">
            2
        </span>

    </li>

</ul>

در این مثال از Flexbox استفاده کرده‌ایم تا متن در سمت اول و Badge در سمت دیگر قرار بگیرد.

ترکیب Card و List Group

یکی از الگوهای بسیار کاربردی Bootstrap، قرار دادن List Group داخل Card است:

<div class="card">

    <div class="card-header">
        تنظیمات حساب
    </div>

    <ul class="list-group list-group-flush">

        <li class="list-group-item">
            اطلاعات شخصی
        </li>

        <li class="list-group-item">
            تغییر رمز عبور
        </li>

        <li class="list-group-item">
            اعلان‌ها
        </li>

        <li class="list-group-item">
            تنظیمات امنیتی
        </li>

    </ul>

</div>

این ساختار برای پنل‌های مدیریتی و کاربری بسیار مناسب است.

داشبورد با Card و List Group

فرض کنید می‌خواهیم بخشی از داشبورد یک فروشگاه را ایجاد کنیم:

<div class="container py-5">

    <div class="row g-4">

        <div class="col-12 col-lg-8">

            <div class="card h-100">

                <div class="card-header d-flex justify-content-between align-items-center">

                    <span>
                        فعالیت‌های اخیر
                    </span>

                    <span class="badge rounded-pill text-bg-primary">
                        5
                    </span>

                </div>

                <ul class="list-group list-group-flush">

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                        سفارش جدید ثبت شد

                        <span class="badge text-bg-success">
                            جدید
                        </span>

                    </li>

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                        پرداخت انجام شد

                        <span class="badge text-bg-success">
                            موفق
                        </span>

                    </li>

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                        یک سفارش منتظر بررسی است

                        <span class="badge text-bg-warning">
                            بررسی
                        </span>

                    </li>

                </ul>

            </div>

        </div>

        <div class="col-12 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h5 class="card-title">
                        وضعیت حساب
                    </h5>

                    <p class="card-text">
                        حساب شما فعال است.
                    </p>

                    <span class="badge rounded-pill text-bg-success">
                        فعال
                    </span>

                </div>

            </div>

        </div>

    </div>

</div>

این الگو را می‌توان در داشبوردهای واقعی توسعه داد.

List Group برای Sidebar

List Group می‌تواند برای ایجاد Sidebar ساده نیز استفاده شود:

<div class="list-group">

    <a
        href="#"
        class="list-group-item list-group-item-action active"
    >
        داشبورد
    </a>

    <a
        href="#"
        class="list-group-item list-group-item-action"
    >
        محصولات
    </a>

    <a
        href="#"
        class="list-group-item list-group-item-action"
    >
        سفارش‌ها
    </a>

    <a
        href="#"
        class="list-group-item list-group-item-action"
    >
        مشتریان
    </a>

    <a
        href="#"
        class="list-group-item list-group-item-action"
    >
        تنظیمات
    </a>

</div>

در یک پروژه واقعی می‌توانیم آن را با Grid و Responsive Utilities ترکیب کنیم.

Card، List Group و Badge در یک پروژه واقعی

حالا یک نمونه کامل‌تر ایجاد کنیم.

<!doctype html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="utf-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <title>
        داشبورد فروشگاه
    </title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet"
    >

</head>

<body>

    <div class="container py-5">

        <div class="mb-4">

            <h1 class="h3">
                داشبورد فروشگاه
            </h1>

            <p class="text-body-secondary">
                وضعیت کلی فروشگاه و فعالیت‌های اخیر
            </p>

        </div>

        <div class="row g-4">

            <div class="col-12 col-md-6 col-xl-4">

                <div class="card h-100 shadow-sm">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center">

                            <h5 class="card-title mb-0">
                                سفارش‌ها
                            </h5>

                            <span class="badge rounded-pill text-bg-primary">
                                24
                            </span>

                        </div>

                        <p class="card-text mt-3">
                            تعداد سفارش‌های ثبت‌شده در فروشگاه.
                        </p>

                        <a href="#" class="btn btn-primary">
                            مشاهده سفارش‌ها
                        </a>

                    </div>

                </div>

            </div>

            <div class="col-12 col-md-6 col-xl-4">

                <div class="card h-100 shadow-sm">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center">

                            <h5 class="card-title mb-0">
                                مشتریان
                            </h5>

                            <span class="badge rounded-pill text-bg-success">
                                120
                            </span>

                        </div>

                        <p class="card-text mt-3">
                            تعداد مشتریان فعال فروشگاه.
                        </p>

                        <a href="#" class="btn btn-success">
                            مشاهده مشتریان
                        </a>

                    </div>

                </div>

            </div>

            <div class="col-12 col-md-12 col-xl-4">

                <div class="card h-100 shadow-sm">

                    <div class="card-header">
                        فعالیت‌های اخیر
                    </div>

                    <ul class="list-group list-group-flush">

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            سفارش جدید

                            <span class="badge text-bg-primary">
                                جدید
                            </span>

                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            پرداخت موفق

                            <span class="badge text-bg-success">
                                موفق
                            </span>

                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            نیاز به بررسی

                            <span class="badge text-bg-warning">
                                بررسی
                            </span>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

در این مثال چند مفهوم را با هم ترکیب کرده‌ایم:

  • Card

  • Card Header

  • Card Body

  • List Group

  • Badge

  • Grid

  • Flexbox

  • Responsive Design

  • Shadow

  • RTL

این ترکیب دقیقاً همان چیزی است که در بسیاری از پروژه‌های واقعی استفاده می‌شود.

نکات مهم در طراحی Card

هنگام استفاده از Card چند نکته را رعایت کنید.

Card را بیش از حد شلوغ نکنید

Card باید یک هدف مشخص داشته باشد.

مثلاً بهتر است Card محصول شامل این موارد باشد:

Image
Title
Description
Price
Action

و اطلاعات غیرضروری را داخل آن قرار ندهیم.

از ارتفاع ثابت غیرضروری استفاده نکنید

اگر محتوای Cardها متفاوت است، استفاده نادرست از ارتفاع ثابت ممکن است باعث مشکلات ظاهری شود.

در Gridهای Card معمولاً h-100 انتخاب مناسبی است:

<div class="card h-100">
    ...
</div>

Card را برای همه چیز استفاده نکنید

هر بخشی از صفحه الزاماً به Card نیاز ندارد.

گاهی استفاده از:

<section>
    ...
</section>

یا:

<div>
    ...
</div>

ساختار ساده‌تر و مناسب‌تری ایجاد می‌کند.

نکات مهم در List Group

List Group زمانی مناسب است که چند آیتم مرتبط داشته باشیم.

مثلاً:

  • تنظیمات

  • پیام‌ها

  • سفارش‌ها

  • دسته‌بندی‌ها

  • فعالیت‌های اخیر

  • وظایف

  • اعلان‌ها

اما اگر ساختار داده پیچیده باشد، ممکن است Table یا ساختار دیگری انتخاب مناسب‌تری باشد.

نکات مهم در Badge

Badge معمولاً باید کوتاه باشد.

مثلاً:

جدید
فعال
غیرفعال
5
12
در انتظار
موفق

بهتر است متن‌های طولانی را داخل Badge قرار ندهیم.

دسترس‌پذیری

هنگام استفاده از این کامپوننت‌ها باید Accessibility را نیز در نظر بگیریم.

برای تصاویر:

<img
    src="product.jpg"
    alt="گوشی هوشمند"
>

برای لینک فعال:

<a
    href="#"
    class="list-group-item list-group-item-action active"
    aria-current="true"
>
    داشبورد
</a>

همچنین اگر Badge فقط اطلاعات بصری ارائه می‌دهد، نباید تنها راه انتقال یک وضعیت مهم باشد.

مثلاً بهتر است وضعیت سفارش فقط با رنگ مشخص نشود:

<span class="badge text-bg-success">
    موفق
</span>

زیرا بعضی کاربران ممکن است تفاوت رنگ‌ها را به‌خوبی تشخیص ندهند.

اشتباهات رایج

استفاده بیش از حد از Card

قرار دادن تمام بخش‌های صفحه داخل Card باعث می‌شود صفحه شلوغ شود.

استفاده از Badge برای متن‌های طولانی

Badge برای اطلاعات کوتاه طراحی شده است.

فراموش کردن Responsive Design

اگر چند Card کنار هم قرار می‌دهیم، باید رفتار آن‌ها در موبایل را نیز مشخص کنیم.

مثلاً:

<div class="col-12 col-md-6 col-lg-4">

استفاده از رنگ بدون مفهوم

رنگ‌ها بهتر است معنی مشخصی داشته باشند.

برای مثال:

Success → موفق
Warning → نیازمند توجه
Danger → خطا یا وضعیت بحرانی
Primary → اطلاعات اصلی

البته نباید معنی وضعیت فقط به رنگ وابسته باشد.

تمرین عملی

یک صفحه برای نمایش محصولات یک فروشگاه طراحی کنید.

صفحه باید شامل موارد زیر باشد:

  1. یک عنوان اصلی

  2. حداقل 6 محصول

  3. هر محصول داخل یک Card

  4. تصویر محصول

  5. نام محصول

  6. توضیح کوتاه

  7. قیمت

  8. یک Badge برای وضعیت محصول

  9. دکمه مشاهده محصول

  10. طراحی Responsive

پیشنهاد می‌شود Grid را به این شکل شروع کنید:

<div class="row g-4">

    <div class="col-12 col-sm-6 col-lg-4">
        ...
    </div>

</div>

سپس داخل هر ستون یک Card قرار دهید.

تمرین پیشرفته

یک داشبورد مدیریت طراحی کنید که شامل بخش‌های زیر باشد:

Dashboard
|
+-- Statistics Cards
|
+-- Recent Activities
|
+-- Orders
|
+-- Notifications
|
+-- Account Status

برای پیاده‌سازی از موارد زیر استفاده کنید:

  • Card

  • Card Header

  • Card Body

  • List Group

  • Badge

  • Grid

  • Flexbox

  • Responsive Utilities

برای وضعیت سفارش‌ها از Badge استفاده کنید:

<span class="badge text-bg-success">
    Completed
</span>

و:

<span class="badge text-bg-warning">
    Pending
</span>

و:

<span class="badge text-bg-danger">
    Cancelled
</span>

جمع‌بندی

در این مقاله با سه کامپوننت بسیار کاربردی Bootstrap آشنا شدیم. Card برای نمایش اطلاعات مرتبط در یک کادر مستقل استفاده می‌شود و می‌تواند شامل Header، Body، Footer، تصویر، عنوان، متن و دکمه باشد. یاد گرفتیم چگونه Cardهای محصول، پروفایل، قیمت‌گذاری و Cardهای افقی ایجاد کنیم و آن‌ها را با Grid و Flexbox به شکل Responsive نمایش دهیم. سپس با List Group آشنا شدیم و ساخت لیست‌های ساده، شماره‌دار، افقی، فعال، غیرفعال و رنگی را یاد گرفتیم. در ادامه Badge را بررسی کردیم که برای نمایش وضعیت، تعداد و برچسب‌های کوتاه بسیار مناسب است. در نهایت این سه کامپوننت را با Grid، Flexbox و Responsive Utilities ترکیب کردیم و یک نمونه داشبورد واقعی ساختیم. تسلط بر Card، List Group و Badge برای ساخت فروشگاه‌ها، داشبوردها، پنل‌های کاربری و بسیاری از رابط‌های کاربری Bootstrap ضروری است.

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.