Finder خرید قالب

کادر هشدار (Toasts)

کلاس toast شبیه کادر هشدار (Alert Box) است که هنگامی که اتفاقی رخ دهد، تنها برای چند ثانیه نمایش داده می‌شود (مثلاً زمانی که کاربر برروی یک کلید کلیک کند، فرمی را ثبت کند و غیره)

مشاهده در سایت بوت استرپ

پیش فرض

<!-- Basic toast example (remove fade show to hide toast initially) -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <div class="d-inline-block align-middle bg-primary rounded-1 me-2" style="width: 1.25rem; height: 1.25rem;"></div>
    <h6 class="fs-sm mb-0 me-auto">Bootstrap</h6>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
// Basic toast example (remove .fade .show to hide toast initially)
.toast.fade.show(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header
    .d-inline-block.align-middle.bg-primary.rounded-1.me-2(style="width: 1.25rem; height: 1.25rem;")
    h6.fs-sm.mb-0.me-auto Bootstrap
    small.text-muted 11 mins ago
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.ms-2.mb-1
  .toast-body Hello, world! This is a toast message.

toastهای رنگی

<!-- Primary toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-primary text-white">
    <i class="fi-bell me-2"></i>
    <span class="fw-bold me-auto">Primary toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-primary">Hello, world! This is a toast message.</div>
</div>

<!-- Accent toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-accent text-white">
    <i class="fi-lock me-2"></i>
    <span class="fw-bold me-auto">Accent toast</span>
    <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-accent">Hello, world! This is a toast message.</div>
</div>

<!-- Success toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-success text-white">
    <i class="fi-check-circle me-2"></i>
    <span class="fw-bold me-auto">Success toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-success">Hello, world! This is a toast message.</div>
</div>

<!-- Danger toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-danger text-white">
    <i class="fi-x-circle me-2"></i>
    <span class="fw-bold me-auto">Danger toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-danger">Hello, world! This is a toast message.</div>
</div>

<!-- Warning toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-warning text-white">
    <i class="fi-alert-triange me-2"></i>
    <span class="fw-bold me-auto">Warning toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</div>

<!-- Info toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-info text-white">
    <i class="fi-info-circle me-2"></i>
    <span class="fw-bold me-auto">Info toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-info">Hello, world! This is a toast message.</div>
</div>

<!-- Dark toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-dark text-white">
    <i class="fi-clock me-2"></i>
    <span class="fw-bold me-auto">Dark toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-dark">Hello, world! This is a toast message.</div>
</div>

<!-- Custom color toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header border-0 text-white" style="background-color: #69459e;">
    <i class="fi-map-pin me-2"></i>
    <span class="fw-bold me-auto">Custom color toast</span>
    <button type="button" class="btn-close btn-close-white text-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body" style="color: #69459e;">Hello, world! This is a toast message.</div>
</div>
// Primary toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-primary.text-white
    i.fi-bell.me-2
    span.fw-bold.me-auto Primary toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-primary Hello, world! This is a toast message.

// Accent toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-accent.text-white
    i.fi-lock.me-2
    span.fw-bold.me-auto Accent toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
  .toast-body.text-accent Hello, world! This is a toast message.

// Success toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-success.text-white
    i.fi-check-circle.me-2
    span.fw-bold.me-auto Success toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-success Hello, world! This is a toast message.

// Danger toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-danger.text-white
    i.fi-x-circle.me-2
    span.fw-bold.me-auto Danger toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-danger Hello, world! This is a toast message.

// Warning toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-warning.text-white
    i.fi-alert-triange.me-2
    span.fw-bold.me-auto Warning toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-warning Hello, world! This is a toast message.

// Info toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-info.text-white
    i.fi-info-circle.me-2
    span.fw-bold.me-auto Info toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-info Hello, world! This is a toast message.

// Dark toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-dark.text-white
    i.fi-clock.me-2
    span.fw-bold.me-auto Dark toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body.text-dark Hello, world! This is a toast message.

// Custom color toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.border-0.text-white(style="background-color: #69459e;")
    i.fi-map-pin.me-2
    span.fw-bold.me-auto Custom color toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.text-white.ms-2
  .toast-body(style="color: #69459e;") Hello, world! This is a toast message.
بالا