Toast در بوت استرپ

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

از تأیید اقدامات کاربر و نمایش وضعیت گرفته تا هشدارهای غیر بحرانی و ارائه اطلاعات مختصر، toastها راهی مؤثر و ظریف برای برقراری ارتباط با کاربران بدون مزاحمت مدال‌ها یا اعلان‌های دائمی هستند.

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

ساختار پایه toast

هسته‌ی یک Toast در بوت استرپ شامل یک عنصر با کلاس .toast و بخش‌های اختیاری سرآیند (header) و بدنه (body) است:

.toast: ظرف اصلی toast است. باید دارای ویژگی‌های role="alert" و aria-live="assertive" (برای اعلان‌های فوری و مهم) یا aria-live="polite" (برای به‌روزرسانی‌های کم‌اهمیت‌تر) و همچنین aria-atomic="true" برای خوانده شدن کامل محتوا توسط صفحه‌خوان‌ها باشد.
.toast-header (اختیاری): شامل عنوان toast (با کلاس .me-auto برای فاصله‌گذاری) و دکمه‌ی بستن <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> است. می‌توان آیکون‌های کوچک یا زمان‌بندی نیز در این بخش قرار داد.
.toast-body: ناحیه‌ی اصلی محتوا است که پیام یا عناصر دیگر در آن قرار می‌گیرند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Toast</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 Toast</h2>
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a basic toast message.
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

کلاس‌های مرتبط

.fade: افزودن جلوه‌ی محو شدن هنگام ظاهر یا ناپدید شدن.
.show: نمایش اولیه toast (معمولاً با جاوااسکریپت اضافه می‌شود).
role="alert": تعریف toast به‌عنوان هشدار برای فناوری‌های کمکی.
aria-live="assertive": صفحه‌خوان باید فوراً این پیام را بخواند (برای موارد مهم).
aria-live="polite": پیام هنگام بیکار بودن کاربر خوانده می‌شود (برای موارد غیر مهم).
aria-atomic="true": محتوای کامل toast به‌صورت یکجا خوانده شود.
data-bs-dismiss="toast": ویژگی برای بستن toast از طریق دکمه.

گزینه‌های جای‌گذاری

Bootstrap کلاس‌های پیش‌فرض برای جای‌گذاری toast ندارد، اما می‌توان با CSS سفارشی، flexbox یا موقعیت‌دهی مطلق آن‌ها را قرار داد. مکان‌های رایج عبارتند از:

بالا راست
بالا مرکز
بالا چپ
پایین راست
پایین مرکز
پایین چپ

toast ها معمولاً درون یک container با موقعیت‌دهی مناسب (مانند position-fixed) قرار می‌گیرند و سپس با ابزارهای چیدمان درون آن تنظیم می‌شوند.

<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="liveToast" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Bootstrap</strong>
            <small>Just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            See? Just like that.
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
  })
}
</script>

<style>
    .toast-container {
        z-index: 1070; /* Ensure toasts appear above other elements */
    }
</style>

toastهای زمینه‌ای (Contextual Toasts)

با استفاده از کلاس‌های رنگ پس‌زمینه مانند .bg-success یا .bg-warning و رنگ متن مانند .text-white می‌توان ظاهر toast را متمایز کرد.

همچنین برای پس‌زمینه‌های تیره از .btn-close-white برای دکمه‌ی بستن استفاده کنید تا دکمه واضح باشد.

<div class="toast fade show bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
        <strong class="me-auto">Success</strong>
        <small>Just now</small>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Your changes have been saved successfully!
    </div>
</div>

<div class="toast fade show bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-warning">
        <strong class="me-auto">Warning</strong>
        <small>2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Please double-check your input.
    </div>
</div>

ویژگی Autohide و Delay

toastها می‌توانند به‌طور خودکار پس از مدت‌زمان مشخص ناپدید شوند:

data-bs-autohide="true" (پیش‌فرض): toast به‌طور خودکار مخفی می‌شود.
data-bs-delay="milliseconds" (پیش‌فرض: ۵۰۰۰): زمان تأخیر بر حسب میلی‌ثانیه قبل از ناپدید شدن.

این ویژگی‌ها را می‌توان مستقیماً روی عنصر .toast یا هنگام ساختن آن با جاوااسکریپت تنظیم کرد.

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="3000">
    <div class="toast-header">
        <strong class="me-auto">Info</strong>
        <small>Just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        This toast will automatically hide in 3 seconds.
    </div>
</div>

نمایش و مخفی کردن toastها

با استفاده از JavaScript API:

ساخت نمونه:

const toastEl = document.getElementById('myToast'); const toast = new bootstrap.Toast(toastEl);

نمایش:

toast.show();

مخفی کردن:

toast.hide();

تغییر وضعیت:

toast.toggle();

جلوگیری از Autohide:

const toastNoAutohide = new bootstrap.Toast(document.getElementById('noAutohideToast'), { autohide: false }); toastNoAutohide.show();

تنظیم تأخیر:

const delayedToast = new bootstrap.Toast(document.getElementById('delayedToast'), { delay: 1000 // 1 second }); delayedToast.show();

رویدادهای toast

Bootstrap رویدادهایی برای toastها فراهم کرده است:

show.bs.toast: زمانی‌که متد show فراخوانی می‌شود.
shown.bs.toast: پس از نمایان شدن کامل.
hide.bs.toast: زمانی‌که متد hide فراخوانی می‌شود.
hidden.bs.toast: پس از ناپدید شدن کامل.

const myToastEl = document.getElementById('myToast');

myToastEl.addEventListener('show.bs.toast', () => {
    console.log('Toast is about to be shown.');
});

myToastEl.addEventListener('shown.bs.toast', () => {
    console.log('Toast is now visible.');
});

myToastEl.addEventListener('hidden.bs.toast', () => {
    console.log('Toast is now hidden.');
});

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

role="alert": تعریف toast به‌عنوان هشدار برای صفحه‌خوان.
aria-live="assertive" برای پیام‌های مهم (استفاده‌ی محدود).
aria-live="polite" برای پیام‌های غیر بحرانی.
aria-atomic="true" برای خواندن کامل محتوا.
دکمه‌ی بستن با aria-label="Close" مشخص شده باشد.
کنتراست رنگ مناسب متن و پس‌زمینه.
دکمه بستن قابل انتخاب با کیبورد.

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

پیام‌های تأیید (مثلاً “مورد به سبد خرید افزوده شد”)
به‌روزرسانی‌های زنده (مثلاً پیام جدید)
هشدارهای غیر بحرانی
ارائه نکات آموزشی یا راهنما
امکان بازگردانی یا تکرار اقدامات
نمایش پیشرفت (مثل بارگذاری سریع)
پیام‌های خوش‌آمدگویی برای کاربران جدید

<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="newMessageToast" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-info text-white">
            <strong class="me-auto">New Message</strong>
            <small class="text-white">Just now</small>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            You have a new message from John Doe.
        </div>
    </div>
</div>

<button type="button" class="btn btn-success" id="newMessageBtn">Show New Message</button>

<script>
    const newMessageBtn = document.getElementById('newMessageBtn');
    const newMessageToast = document.getElementById('newMessageToast');
    const toast = new bootstrap.Toast(newMessageToast);

    newMessageBtn.addEventListener('click', () => {
        toast.show();
    });

    // Simulate receiving a new message (in a real app, this would be triggered by an event)
    setTimeout(() => {
        toast.show();
    }, 5000);
</script>

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

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

نتیجه‌گیری

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