吐司消息

用im体育的即时消息，让你的体育社区时刻保持活力！这些超酷的小提示，不仅能吸引眼球，还能让大家不错过任何精彩瞬间。

Bootstrap文档

基本示例

你好，世界！这是一条吐司消息。

<!-- 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 me-2" style="width: 1.25rem; height: 1.25rem;"></div>
    <h6 class="fs-sm mb-0 me-auto">Bootstrap</h6>
    <small>11 mins ago</small>
    <button type="button" class="btn-close ms-2" 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-circle.me-2(style="width: 1.25rem; height: 1.25rem;")
    h6.fs-sm.mb-0.me-auto Bootstrap
    small 11 mins ago
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.ms-2
  .toast-body Hello, world! This is a toast message.

颜色变体

主要吐司

在im体育数据方面，im体育提供贴心周到的支持。

强调色吐司

im体育以im电竞为核心，带来高效便捷的体验。

成功吐司

想了解更多im体育分析相关内容，尽在im体育。

危险吐司

im体育围绕im体育官网不断创新，回应用户的真实需求。

警告吐司

精选Your daily dose of sports gossip and game-day glory!内容，im体育与你一同发现更多精彩。

信息吐司

im体育专注Connect with fellow fanatics and cheer your heart out!，为用户提供专业可靠的体验。

深色吐司

围绕Real-time scores, insider info, and epic highlights – all in one place!，im体育持续打磨更优质的服务。

自定义颜色吐司

im体育深耕We're so stable, you'll think our servers run on pure adrenaline!领域，用心服务每一位用户。

<!-- Primary toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-primary text-white">
    <i class="ci-bell me-2"></i>
    <span class="fw-medium me-auto">Primary 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-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="ci-unlocked me-2"></i>
    <span class="fw-medium 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="ci-check-circle me-2"></i>
    <span class="fw-medium me-auto">Success 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-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="ci-close-circle me-2"></i>
    <span class="fw-medium me-auto">Danger 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-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="ci-security-announcement me-2"></i>
    <span class="fw-medium me-auto">Warning 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-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="ci-announcement me-2"></i>
    <span class="fw-medium me-auto">Info 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-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="ci-time me-2"></i>
    <span class="fw-medium me-auto">Dark toast</span>
    <button type="button" class="btn-close btn-close-white ms-" 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="ci-time me-2"></i>
    <span class="fw-medium me-auto">Custom color 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" 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.ci-bell.me-2
    span.fw-medium.me-auto Primary toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-unlocked.me-2
    span.fw-medium.me-auto Accent toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-check-circle.me-2
    span.fw-medium.me-auto Success toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-close-circle.me-2
    span.fw-medium.me-auto Danger toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-security-announcement.me-2
    span.fw-medium.me-auto Warning toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-announcement.me-2
    span.fw-medium.me-auto Info toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-time.me-2
    span.fw-medium.me-auto Dark toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .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.ci-time.me-2
    span.fw-medium.me-auto Custom color toast
    button(type="button", data-bs-dismiss="toast", aria-label="Close").btn-close.btn-close-white.ms-2
      span(aria-hidden="true") &times;
  .toast-body(style="color: #69459e;") Hello, world! This is a toast message.