اعلان Toast

با یک اعلان Toast، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، اعلان‌ها را به بازدیدکنندگان خود ارسال کنید.

اعلان Toast در بوت استرپ
مثال پایه
<div class="toast 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 class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
پشتهسازی

وقتی چندین اعلان Toast دارید، به طور پیش‌فرض آن‌ها را به صورت خوانا به صورت عمودی روی هم قرار می‌دهیم.

<div class="toast show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">just now
    </small><button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">See? Just like this.</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small>
    <button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Heads up, toasts will stack automatically</div>
</div>
تعیین سطح

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

مثال
بوت استرپ11 دقیقه پیش
سلام دنیا! این یک پیام اعلان Toast است.
<div class="position-relative" aria-live="polite" aria-atomic="true" style="min-height: 90px;">
  <div class="toast show position-absolute top-0 end-0">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong><small>11 mins ago</small>
      <button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

همچنین می توانید با ابزارهای فلکس باکس برای تراز کردن اعلان Toast ها به صورت افقی و/یا عمودی جذاب باشید.

<div class="d-flex flex-center" aria-live="polite" aria-atomic="true" style="min-height: 300px;">
  <div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="me-auto">Bootstrap</strong><small>11 mins ago</small><button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>
اعلان Toast زنده
<button class="btn btn-primary" id="liveToastBtn" type="button">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
  <div class="toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-primary text-white"><strong class="me-auto">Bootstrap</strong><small>11 mins ago</small><button class="btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>
نیمه شفاف

اعلان Toast ها نیز کمی شفاف هستند، بنابراین روی هر چیزی که ممکن است ظاهر شوند مخلوط می شوند.

<div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
  <div class="toast-header"><strong class="me-auto">Bootstrap</strong><small class="text-muted">11 mins ago</small><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
طرح های رنگی
<div class="d-flex">
  <div class="toast show align-items-center text-white bg-primary border-0" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
      <button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>
محتوای دلخواه

همچنین می توانید کنترل ها و اجزای اضافی را به اعلان Toast اضافه کنید.

<div class="toast show align-items-center" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">Hello, world! This is a toast message.</div>
    <button class="btn-close me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="mt-2 p-3 border-top">
    <button class="btn btn-primary btn-sm" type="button">Take action</button>
    <button class="btn btn-secondary btn-sm ms-2" type="button" data-bs-dismiss="toast">Close</button>
  </div>
</div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

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

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما
چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال
موقعیت ناوبری

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

سبک نوار ناوبری عمودی

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

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی