لوگو لوگوی تاریک
کامپوننت ها

Toast بوت استرپ

با یک toast، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، پوش نوتیفیکیشن ها را به بازدیدکنندگان خود ارسال کنید. این افزونه با فلکس باکس ساخته شده است، بنابراین ترازبندی و قرار دادن آن ها آسان است.

مثال های پایه

Toast ها اطلاع رسانی های سبک وزنی هستند که برای تقلید از پوش نوتیفیکیشن ها طراحی شدند.

مثال کد
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small>11 دقیقه پیش</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">سلام دنیا! این یک پیام toast است.</div>
</div>
مثال کد
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small class="text-muted">11 دقیقه پیش</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">سلام دنیا! این یک پیام toast است.</div>
</div>
مثال کد
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small class="text-muted">هم اکنون</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">دیدید؟ درست مثل این.</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small class="text-muted">2 ثانیه پیش</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">مراقب باشید، toast ها به طور خودکار روی هم انباشته می شوند</div>
</div>
بوت استرپ 11 دقیقه پیش
سلام دنیا! این یک پیام toast است.
مثال کد
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast-container position-absolute top-0 end-0 p-3">
    <div class="toast show">
      <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small>11 دقیقه پیش</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
          <em class="icon ni ni-cross-sm"></em>
        </button>
      </div>
      <div class="toast-body">
        سلام دنیا! این یک پیام toast است.
      </div>
    </div>
  </div>
</div>
مثال کد
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
    <!-- آن را در موقعیت قرار دهید -->
    <div class="toast-container position-absolute top-0 end-0 p-3">
        <!-- سپس toast ها را درون آن قرار دهید -->
        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto text-primary">بوت استرپ</strong>
            <small class="text-muted">هم اکنون</small>
            <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
              <em class="icon ni ni-cross-sm"></em>
            </button>
          </div>
          <div class="toast-body">
            دیدید؟ درست مثل این.
          </div>
        </div>

        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto text-primary">بوت استرپ</strong>
            <small class="text-muted">2 ثانیه پیش</small>
            <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
              <em class="icon ni ni-cross-sm"></em>
            </button>
          </div>
          <div class="toast-body">
            مراقب باشید، toast ها به طور خودکار روی هم انباشته می شوند
          </div>
        </div>
    </div>
</div>
مثال کد
<!-- کانتینر فلکس باکس برای ترازبندی کردن toast ها -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

<!-- سپس toast ها را درون آن قرار دهید -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto text-primary">بوت استرپ</strong>
            <small>11 دقیقه پیش</small>
            <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">سلام دنیا! این یک پیام toast است.</div>
    </div>
</div>
مثال کد
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
    <div class="toast-header">
        <strong class="me-auto text-primary">بوت استرپ</strong>
        <small>11 دقیقه پیش</small>
        <button type="button" class="close" data-dismiss="toast" aria-label="بستن">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">سلام دنیا! این یک پیام toast است.</div>
</div>
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان