لوگوی تاریک

میربال
    زبان
    انگلیسی انگلیسی
    فرانسوی فرانسوی
    اسپانیایی اسپانیایی
    آلمانی آلمانی
    ایتالیایی ایتالیایی
اطلاعیه‌ها
مشاهده همه
یک کار جدید دارید

الان

یک پیام از نایومی

1 ساعت قبل

شما ادمین شدید

3 روز قبل

یک پیام از رابرت

2 هفته قبل

پرداخت از جاناتان

3 روز قبل

کامنت جدید روی پست شما

5 ساعت قبل

خوانده شده
پیام جدید از اما

5 دقیقه قبل

یادآوری: جلسه 3 عصر

30 دقیقه قبل

نامه از مارکتینگ

1 روز قبل

پیام سیستم: آپدیت شد

4 روز قبل

پیام از کلارا

1 هفته قبل

خوانده شده
تسک جدید: طراحی یوای

الان

ارسال گزارش پروژه

2 ساعت قبل

اتمام تسک: ای پی ای اینتگرید شد

دیروز

کد ریویو: در انتظار تایید

1 هفته قبل

خوانده شده
جعبه هشدار وجود ندارد
همه مشاهده شد

در حال حاضر هیچ هشدار جدیدی ندارید. برای به روز رسانی اینجا را زیر نظر داشته باشید.

سوفی جنت
sophie@gmail.com
آواتار

توست

توست
نمای کلی صفحه
توست پیش فرض

از بوت استرپ استفاده کنید توست پیش فرض برای نمایش اعلان ها با .توست کلاس برای نشان دادن توست، آن را اضافه کنید .نمایش کلاس و از جاوا اسکریپت برای اخراج خودکار استفاده کنید.

<div class="toast show mb-4" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="assets/images/logo-md.png" class="me-auto" height="20" alt="...">
        <small class="text-muted">11 min 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 toast message.
    </div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="assets/images/logo-md.png" class="me-auto" height="20" alt="...">
        <small class="text-muted">11 min ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        <h5 class="mb-1 fs-15">Your account will be permanently deleted?</h5>
        <p class="mb-0">Do you intend to continue?</p>
        <div class="mt-3 pt-3 border-top d-flex gap-2">
            <button class="btn btn-dark btn-sm" type="button">I'm not sure</button>
            <button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast">Remove My Account</button>
        </div>
    </div>
</div>
مثال زنده

بررسی کنید مثال زنده یک توست بوت استرپ با اضافه کردن یک <div class="toast"> با .توست کلاس به صفحه شما از جاوا اسکریپت برای نمایش یا پنهان کردن توست و سفارشی کردن محتوای آن در صورت نیاز استفاده کنید.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="assets/images/logo-md.png" class="me-auto" height="20" alt="...">
            <small class="text-muted">11 min ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <h6 class="mb-0">Hello, world! This is a toast message.</h6>
        </div>
    </div>
</div>
طرح های رنگی

درخواست کنید طرح های رنگی برای بوت استرپ توست با استفاده از کلاس هایی مانند .bg-موفقیت یا .bg- خطر. این کلاس‌ها رنگ پس‌زمینه توست را برای مطابقت با تم‌های مختلف، مانند موفقیت یا خطا، تغییر می‌دهند.

<div class="toast show align-items-center text-white text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Primary toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-secondary border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Secondary toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-success border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Success toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-info border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the Info toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-warning border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the warning toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-danger border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the danger toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-bg-light border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the light toast message.
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<div class="toast show align-items-center text-white text-bg-dark border-0 mt-3" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is the dark toast message.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
قرار دادن توست

تنظیم کنید قرار دادن توست در بوت استرپ با استفاده از کلاس هایی مانند .top-0 .start-50 یا .bottom-0 .end-0. این کلاس ها توست را در گوشه های مختلف صفحه نمایش قرار می دهند.

... 11 دقیقه پیش
سلام، دنیا! این یک پیام توست است.
نمونه رنگ توست سفارشی

سفارشی کنید رنگ های توست در بوت استرپ با اعمال کلاس هایی مانند .bg-primary یا .text-light به <div class="toast">. این به شما امکان می دهد رنگ های پس زمینه و متن دلخواه را برای توست خود تنظیم کنید.

سفارشی سازی تم
طرح بندی:
عمودی
افقی
نیم جعبه
عرض محتوا:
پیش فرض
جعبه
جهت چیدمان:
LTR
RTL
حالت چیدمان:
نور
تاریک
سیستم
اندازه نوار کناری:
پیش فرض
متوسط
نماد
Icon hover