اعلان های Toasts

اعلان‌های Toasts برای کمک به ارسال هشدارها به کاربران شما
دمو
اعلان محو شدن خودکار:

با کلیک روی دکمه بالا، هشدار در سمت چپ پایین این المان ظاهر می شود.

<!-- Toast button trigger -->
<button class="btn btn-primary mb-3" id="toastBasicTrigger">دمو</button>

<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; left: 1rem;">
    <!-- Toast -->
    <div class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
        <div class="toast-header">
            <i data-feather="bell"></i>
            <strong class="mr-auto">اعلان محو شدن خودکار</strong>
            <small class="text-muted ml-2">همین الان</small>
            <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                                </button>
        </div>
        <div class="toast-body">این یک نمونه هشدار اعلان است، به طور خودکار حذف می شود، یا می توانید آن را به صورت دستی رد کنید.</div>
    </div>
</div>
//- Toast button trigger
button.btn.btn-primary.mb-3#toastBasicTrigger دمو

//- Toast container
div(style='position: absolute; bottom: 1rem; left: 1rem;')
    //- Toast
    .toast#toastBasic(role='alert', aria-live='assertive', aria-atomic='true', data-bs-delay='3000')
        .toast-header
            i(data-feather='bell').me-2
            strong.me-auto اعلان محو شدن خودکار
            small.text-muted.ms-2 همین الان
            button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
        .toast-body
            | این یک نمونه هشدار اعلان است، به طور خودکار حذف می شود، یا می توانید آن را به صورت دستی رد کنید.
$("#toastBasicTrigger").on("click", function(e) {
    e.preventDefault();
    $("#toastBasic").toast("show");
});

اعلان ها با استفاده از موقعیت position: absolute قرار می گیرند , به این معنی که آنها خود را نسبت به نزدیکترین المان والد خود با استفاده از موقعیت قرار می دهند position: relative .

المان ظروف با موقعیت مطلق (به جای استفاده از موقعیت مطلق روی خود toast) استفاده می شود، بنابراین در صورت استفاده از چندین اعلان، اعلان ها به طور خودکار روی هم چیده می شوند. برای اطلاعات بیشتر در مورد نحوه استفاده و موقعیت اعلان، به اسناد رسمی بوت استرپ مراجعه کنید.

توجه: اعلان ها برای مقداردهی اولیه نیاز به جاوا اسکریپت دارند!

اعلان پایه - رد کردن دستی:

با کلیک روی دکمه بالا، هشدار اعلان در سمت چپ پایین این المان ظاهر می شود.

<!-- Toast button trigger -->
<button class="btn btn-primary mb-3" id="toastNoAutohideTrigger">دمو</button>

<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; left: 1rem;">
    <!-- Toast -->
    <div class="toast" id="toastNoAutohide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
        <div class="toast-header">
            <i data-feather="bell"></i>
            <strong class="mr-auto">اعلان رد کردن دستی</strong>
            <small class="text-muted ml-2">همین الان</small>
            <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                                </button>
        </div>
        <div class="toast-body">این یک اعلان toast است. برای بستن باید بر روی x کلیک کنید.</div>
    </div>
</div>
//- Toast button trigger
button.btn.btn-primary.mb-3#toastNoAutohideTrigger دمو

//- Toast container
div(style='position: absolute; bottom: 1rem; left: 1rem;')
    //- Toast
    .toast#toastNoAutohide(role='alert', aria-live='assertive', aria-atomic='true', data-bs-autohide='false')
        .toast-header
            i(data-feather='bell').me-2
            strong.me-auto اعلان رد کردن دستی
            small.text-muted.ms-2 همین الان
            button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
        .toast-body
            | این یک اعلان toast است. برای بستن باید بر روی x کلیک کنید.
$("#toastNoAutohideTrigger").on("click", function(e) {
    e.preventDefault();
    $("#toastNoAutohide").toast("show");
});

مثال بالا از ویژگی مشخصه data-bs-autohide='false' استفاده می کند که ویژگی پنهان کردن خودکار را غیرفعال می کند. شما باید به صورت دستی این toast آزمایشی را با کلیک کردن روی دکمه x روی toast رد کنید.

توجه: اعلان ها برای مقداردهی اولیه نیاز به جاوا اسکریپت دارند!

رنگ بندی
تغییر رنگ متن:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-primary">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن اولیه</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن اولیه در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-secondary">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن ثانویه</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن ثانویه در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-success">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن موفقیت</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن موفقیت در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-info">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن اطلاعات</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن اطلاعات در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-warning">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن اخطار</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن اخطار در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;">
    <div class="toast-header text-danger">
        <i data-feather="bell"></i>
        <strong class="mr-auto">اعلان toast متن خطر</strong>
        <small class="text-muted ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن خطر در هدر استفاده می کند.</div>
</div>
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-primary
        i(data-feather='alert-circle').me-2
        strong.me-auto اعلان toast متن اولیه
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن اولیه در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-secondary
        i(data-feather='alert-circle').me-2
        strong.me-auto اعلان toast متن ثانویه
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن ثانویه در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-success
        i(data-feather='check-circle').me-2
        strong.me-auto اعلان toast متن موفقیت
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن موفقیت در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-info
        i(data-feather='info').me-2
        strong.me-auto اعلان toast متن اطلاعات
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن اطلاعات در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-warning
        i(data-feather='alert-triangle').me-2
        strong.me-auto اعلان toast متن اخطار
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن اخطار در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true', style='opacity: 1;')
    .toast-header.text-danger
        i(data-feather='alert-octagon').me-2
        strong.me-auto اعلان toast متن خطر
        small.text-muted.ms-2 همین الان
        button.ms-2.mb-1.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن خطر در هدر استفاده می کند.
مثال‌های بالا از یک کلاس کاربردی رنگ متن متفاوت در سربرگ toast استفاده می‌کنند تا سطح دیگری از زمینه و تاکید بر اعلان‌های toast اضافه کنند. می توانید از هر یک از ابزارهای رنگ متن موجود با بوت استرپ یا با تم SB Admin Pro استفاده کنید!
تغییر رنگ پس زمینه:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-primary text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto"> اعلان toast متن اولیه</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ پس زمینه اولیه در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-secondary text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto">اعلان toast متن ثانویه</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ پس زمینه ثانویه در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto">اعلان toast متن موفقیت</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body"> این اعلان toast از رنگ پس زمینه موفقیت در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-info text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto">اعلان toast متن اطلاعات</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body"> این اعلان toast از رنگ متن اطلاعات در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-warning text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto">اعلان toast متن اخطار</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body"> این اعلان toast از رنگ متن اخطار در هدر استفاده می کند.</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-danger text-white">
        <i data-feather="alert-circle"></i>
        <strong class="mr-auto">اعلان toast متن خطر</strong>
        <small class="text-white-50 ml-2">همین الان</small>
        <button class="ml-2 mb-1 btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close">                                                            </button>
    </div>
    <div class="toast-body">این اعلان toast از رنگ متن خطر در هدر استفاده می کند.</div>
</div>
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-primary.text-white
        i(data-feather='alert-circle').me-2.text-white-50
        strong.me-auto اعلان toast متن اولیه
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ پس زمینه اولیه در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-secondary.text-white
        i(data-feather='alert-circle').me-2.text-white-50
        strong.me-auto اعلان toast متن ثانویه
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ پس زمینه ثانویه در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-success.text-white
        i(data-feather='check-circle').me-2.text-white-50
        strong.me-auto اعلان toast متن موفقیت
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ پس زمینه موفقیت در هدر استفاده می کند..toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-info.text-white
        i(data-feather='info').me-2.text-white-50
        strong.me-auto اعلان toast متن اطلاعات
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن اطلاعات در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-warning.text-white
        i(data-feather='alert-triangle').me-2.text-white-50
        strong.me-auto اعلان toast متن اخطار
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن اخطار در هدر استفاده می کند.
.toast(role='alert', aria-live='assertive', aria-atomic='true')
    .toast-header.bg-danger.text-white
        i(data-feather='alert-octagon').me-2.text-white-50
        strong.me-auto اعلان toast متن خطر
        small.text-white-50.ms-2 همین الان
        button.ms-2.mb-1.btn-close.btn-close-white(type='button', data-bs-dismiss='toast', aria-label='Close')
    .toast-body
        | این اعلان toast از رنگ متن خطر در هدر استفاده می کند.
مثال‌های بالا از ترکیبی از ابزارهای رنگ پس‌زمینه و ابزارهای رنگ متن در سربرگ toast استفاده می‌کنند تا سطح دیگری از زمینه و تاکید بر اعلان‌های toast اضافه کنند. می‌توانید از هر ترکیبی از رنگ پس‌زمینه یا ابزارهای رنگ متن موجود با Bootstrap یا با تم SB Admin Pro استفاده کنید!
مستندات بوت استرپ موجود است

toast ها جزء پیش فرضی هستند که در چارچوب Bootstrap گنجانده شده است. برای اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از toast ها در پروژه خود، از صفحه مستندات رسمی Bootstrap toasts دیدن کنید.

از Bootstrap Toasts Docs دیدن کنید