Badgeهای Bootstrap یا نشان‌ها در بوت استرپ

Badgeهای Bootstrap برچسب‌های کوچک و درون‌خطی هستند که برای افزودن اطلاعات تکمیلی یا شاخص‌های بصری به سایر محتواها به کار می‌روند. آن‌ها انتخابی عالی برای نمایش موارد جدید یا خوانده‌نشده، نمایش شمارش‌ها، دسته‌بندی محتوا یا جلب توجه به وضعیت‌های خاص بدون بر هم زدن ساختار متن هستند. این راهنمای جامع به بررسی دقیق استایل‌های مختلف، مفاهیم معنایی، کاربردهای پویا، ملاحظات دسترسی‌پذیری و روش‌های خلاقانه استفاده از این ابزار می‌پردازد.

استایل پایه‌ی Badge (کلاس `.badge`)

پایه‌ی ایجاد یک Badge در Bootstrap استفاده از کلاس .badge است. وقتی این کلاس را به یک عنصر <span> یا عنصر درون‌خطی دیگر اعمال کنید، آن را به یک برچسب کوچک و گرد با استایل پیش‌فرض تبدیل می‌کند:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Badges</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>Example heading <span class="badge bg-secondary">New</span></h2>
        <button type="button" class="btn btn-primary">
            Notifications <span class="badge bg-danger">9</span>
        </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ویژگی‌ها:

درون‌خطی بودن: Badgeها در جریان متن جاری هستند.
گوشه‌های گرد: با ظاهری نرم و دیداری دل‌پذیر.
پدینگ و فونت پیش‌فرض: Bootstrap اندازه فونت و فاصله مناسب برای تمایز بصری را اعمال می‌کند.

رنگ‌های زمینه‌ی Badgeها (کلاس‌های `.bg-*`)

مانند آگاه‌سازها (Alerts)، Bootstrap کلاس‌های رنگ زمینه مختلفی برای Badgeها ارائه می‌دهد تا به سرعت معنای آن‌ها را منتقل کند:

.bg-primary: برای دسته‌بندی‌های اصلی یا نکات مهم
.bg-secondary: برای نشانگرهای کم‌اهمیت‌تر اما مرتبط
.bg-success: برای نمایش موفقیت یا وضعیت مثبت
.bg-danger: برای خطاها، هشدارها یا وضعیت‌های بحرانی
.bg-warning: برای هشدار درباره موارد مهم
.bg-info: برای برچسب‌های خنثی اما مفید
.bg-light: پس‌زمینه‌ی خاکستری روشن برای لیبل‌های ظریف
.bg-dark: پس‌زمینه خاکستری تیره برای تضاد بیشتر

برجسته‌سازی زیبا: Badgeهای بیضی شکل (کلاس `.rounded-pill`)

برای ایجاد ظاهری چشمگیرتر، می‌توانید کلاس .rounded-pill را به Badge اضافه کنید تا دو انتهای آن کاملاً گرد شود:

<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-warning rounded-pill text-dark">Warning</span>
<span class="badge bg-info rounded-pill text-dark">Info</span>
<span class="badge bg-light text-dark rounded-pill">Light</span>
<span class="badge bg-dark rounded-pill">Dark</span>

نکته: برای رنگ‌های روشن‌تر، استفاده از کلاس .text-dark برای خوانایی بهتر ضروری است.

استفاده از Badgeها در کنار دیگر اجزای Bootstrap

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

عنوان‌ها: نمایش موارد جدید یا به‌روزرسانی‌شده
دکمه‌ها: نمایش تعداد اعلان‌ها یا وضعیت
آیتم‌های ناوبری: نشان‌دهنده پیام‌های خوانده‌نشده یا محتوای جدید
گروه‌های لیستی: برچسب‌گذاری یا دسته‌بندی آیتم‌ها
کارت‌ها: نمایش وضعیت یا تگ‌های مرتبط با محتوا

تفسیر معنای Badge با توجه به زمینه

معنای یک Badge اغلب به زمینه اطراف آن و رنگ استفاده‌شده وابسته است. ایجاد یک طرح رنگی یکپارچه در اپلیکیشن کمک می‌کند تا کاربران به‌سرعت معنا را درک کنند. برای مثال:

قرمز = خطا یا اولویت بالا
سبز = موفقیت یا در دسترس بودن
زرد = هشدار یا وضعیت در انتظار

به‌روزرسانی Badge با جاوااسکریپت

Badgeها را می‌توان به صورت پویا و بلادرنگ با جاوااسکریپت به‌روزرسانی کرد:

// Example: Updating a notification badge count
const notificationBadge = document.querySelector('.notification-count');
let unreadCount = 5;

function updateNotificationCount() {
    notificationBadge.textContent = unreadCount;
    if (unreadCount > 0) {
        notificationBadge.classList.add('bg-danger'); // Highlight if there are notifications
    } else {
        notificationBadge.classList.remove('bg-danger');
        notificationBadge.classList.add('bg-secondary'); // Default if no notifications
    }
}

// Simulate a new notification
setTimeout(() => {
    unreadCount++;
    updateNotificationCount();
}, 3000);

// Initial update
updateNotificationCount();

ملاحظات دسترسی‌پذیری

برای تضمین دسترسی‌پذیری:

زمینه مهم است: Badgeها اغلب وابسته به متن اطراف هستند. مطمئن شوید متن کافی برای درک معنا وجود دارد.
وضوح برای صفحه‌خوان‌ها: برای Badgeهای مستقل، از کلاس .visually-hidden برای افزودن توضیح مخفی استفاده کنید:

<span class="badge bg-danger">Error <span class="visually-hidden">critical error</span></span>

کنتراست رنگ: مطمئن شوید که متن Badge با پس‌زمینه تضاد کافی دارد. Bootstrap معمولاً این مورد را رعایت می‌کند، ولی بهتر است بررسی شود.

راهکارهای خلاقانه در استفاده از Badgeها

فراتر از برچسب‌های ساده، از Badgeها به صورت خلاقانه استفاده کنید:

نمایش پیشرفت: نمایش مراحل با Badgeهای رنگی کوچک
سیستم برچسب‌گذاری: نمایش کلمات کلیدی محتوا با Badge
نمایش وضعیت: Badgeهای رنگی کوچک برای آنلاین/آفلاین بودن
شمارش آیتم‌ها در لیست‌ها: نمایش عدد کنار هر مورد
فیلترهای قابل کلیک: استفاده از Badge برای پالایش نتایج جستجو

بهترین شیوه‌ها

هدف‌مند استفاده کنید: از استفاده بیش‌ازحد خودداری کنید. فقط اطلاعات مهم را برجسته نمایید.
ثبات در طراحی: رنگ و استایل یکسان در کل اپلیکیشن داشته باشید.
زمینه شفاف: مطمئن شوید معنا از متن اطراف یا توضیح تکمیلی قابل درک است.
متن کوتاه: متن Badge باید کوتاه و واضح باشد.
تست در مرورگرهای مختلف: رندر درست در همه مرورگرها را بررسی کنید.

نتیجه‌گیری

Badgeهای Bootstrap ابزارهایی سبک و انعطاف‌پذیر هستند که با ایجاد نشانه‌های بصری ظریف، به بهبود خوانایی و انتقال سریع اطلاعات کمک می‌کنند. با درک انواع استایل‌ها، معانی زمینه‌ای، قابلیت‌های پویا و رعایت اصول دسترسی‌پذیری، می‌توانید از آن‌ها برای ایجاد تجربه‌ای بهتر، هوشمندانه‌تر و کاربرمحور استفاده کنید.