加入購物車 通知
不错过任何一场您关心的比赛，实时赛况，即刻送达。
Bootstrap 文件
基本範例
一個簡單的主要提示訊息，內含 一個範例連結。如果您喜歡，請點擊它。
一個簡單的強調提示訊息，內含 一個範例連結在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 alert -->
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Success alert -->
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Info alert -->
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Light alert -->
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>// Primary alert
.alert.alert-primary(role="alert")
| A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Accent alert
.alert.alert-accent(role="alert")
| A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Secondary alert
.alert.alert-secondary(role="alert")
| A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Success alert
.alert.alert-success(role="alert")
| A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Danger alert
.alert.alert-danger(role="alert")
| A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Warning alert
.alert.alert-warning(role="alert")
| A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Info alert
.alert.alert-info(role="alert")
| A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Light alert
.alert.alert-light(role="alert")
| A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Dark alert
.alert.alert-dark(role="alert")
| A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
帶有圖示的提示
在im体育直播方面，im体育提供贴心周到的支持。 一個範例連結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!领域，用心服务每一位用户。 一個範例連結在im体育直播方面，im体育提供贴心周到的支持。
im体育以im体育数据为核心，带来高效便捷的体验。 一個範例連結想了解更多im电竞相关内容，尽在im体育。
想了解更多We're so stable, you'll think our servers run on pure adrenaline!相关内容，尽在im体育。 一個範例連結im体育围绕im体育直播不断创新，回应用户的真实需求。
精选im体育数据内容，im体育与你一同发现更多精彩。 一個範例連結im体育专注im电竞，为用户提供专业可靠的体验。
围绕im体育分析，im体育持续打磨更优质的服务。 一個範例連結im体育深耕im体育官网领域，用心服务每一位用户。
<!-- Primary alert -->
<div class="alert alert-primary d-flex" role="alert">
<div class="alert-icon">
<i class="ci-bell"></i>
</div>
<div>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Accent alert -->
<div class="alert alert-accent d-flex" role="alert">
<div class="alert-icon">
<i class="ci-security-check"></i>
</div>
<div>A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary d-flex" role="alert">
<div class="alert-icon">
<i class="ci-time"></i>
</div>
<div>A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Success alert -->
<div class="alert alert-success d-flex" role="alert">
<div class="alert-icon">
<i class="ci-check-circle"></i>
</div>
<div>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Danger alert -->
<div class="alert alert-danger d-flex" role="alert">
<div class="alert-icon">
<i class="ci-close-circle"></i>
</div>
<div>A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Warning alert -->
<div class="alert alert-warning d-flex" role="alert">
<div class="alert-icon">
<i class="ci-security-announcement"></i>
</div>
<div>A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Info alert -->
<div class="alert alert-info d-flex" role="alert">
<div class="alert-icon">
<i class="ci-announcement"></i>
</div>
<div>A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Light alert -->
<div class="alert alert-light d-flex" role="alert">
<div class="alert-icon">
<i class="ci-unlocked"></i>
</div>
<div>A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Dark alert -->
<div class="alert alert-dark d-flex" role="alert">
<div class="alert-icon">
<i class="ci-location"></i>
</div>
<div>A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>// Primary alert
.alert.alert-primary.d-flex(role="alert")
.alert-icon
i.ci-bell
div A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Accent alert
.alert.alert-accent.d-flex(role="alert")
.alert-icon
i.ci-security-check
div A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Secondary alert
.alert.alert-secondary.d-flex(role="alert")
.alert-icon
i.ci-time
div A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Success alert
.alert.alert-success.d-flex(role="alert")
.alert-icon
i.ci-check-circle
div A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Danger alert
.alert.alert-danger.d-flex(role="alert")
.alert-icon
i.ci-close-circle
div A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Warning alert
.alert.alert-warning.d-flex(role="alert")
.alert-icon
i.ci-security-announcement
div A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Info alert
.alert.alert-info.d-flex(role="alert")
.alert-icon
i.ci-announcement
div A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Light alert
.alert.alert-light.d-flex(role="alert")
.alert-icon
i.ci-unlocked
div A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
// Dark alert
.alert.alert-dark.d-flex(role="alert")
.alert-icon
i.ci-location
div A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
可關閉的提示
主要提示： 點擊右側的關閉按鈕將我關閉。
強調提示： 在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!不断创新，回应用户的真实需求。
警告提示： im体育围绕Your daily dose of sports gossip and game-day glory!不断创新，回应用户的真实需求。
資訊提示： 精选Connect with fellow fanatics and cheer your heart out!内容，im体育与你一同发现更多精彩。
淺色提示： im体育专注Real-time scores, insider info, and epic highlights – all in one place!，为用户提供专业可靠的体验。
深色提示： 围绕We're so stable, you'll think our servers run on pure adrenaline!，im体育持续打磨更优质的服务。
<!-- Primary alert -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<span class="fw-medium">Primary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Accent alert -->
<div class="alert alert-accent alert-dismissible fade show" role="alert">
<span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Success alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="fw-medium">Success alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Danger alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="fw-medium">Danger alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Warning alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="fw-medium">Warning alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Info alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<span class="fw-medium">Info alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Light alert -->
<div class="alert alert-light alert-dismissible fade show" role="alert">
<span class="fw-medium">Light alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Dark alert -->
<div class="alert alert-dark alert-dismissible fade show" role="alert">
<span class="fw-medium">Dark alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div>// Primary alert
.alert.alert-primary.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Primary alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Accent alert
.alert.alert-accent.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Secondary alert
.alert.alert-secondary.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Success alert
.alert.alert-success.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Success alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Danger alert
.alert.alert-danger.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Danger alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Warning alert
.alert.alert-warning.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Warning alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Info alert
.alert.alert-info.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Info alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Light alert
.alert.alert-light.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Light alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close
// Dark alert
.alert.alert-dark.alert-dismissible.fade.show(role="alert")
| <span class="fw-medium">Dark alert:</span> Dismiss me by clicking the close button on the right.
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close.btn-close-white
額外內容
做得好！
太棒了，您成功閱讀了這則重要的提示訊息。這個範例文字會稍微長一些，以便您能看到此類內容的提示訊息內部的間距效果。
隨時需要時，請務必使用邊距工具程式來保持整潔。
<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
<h4 class="pt-2 alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="pt-3 mb-2">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>// Accent alert
.alert.alert-accent(role="alert")
h4.pt-2.alert-heading Well done!
p Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
hr
p.pt-3.mb-2 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
背景圖片
<!-- Alert with bakground image -->
<div class="alert alert-dismissible bg-size-cover fade show text-center py-5" style="background-image: url(path-to-image)" role="alert">
<i class="ci-time d-block text-white my-4" style="font-size: 3rem;"></i>
<h2 class="text-white text-shadow">Check Our Limited Offers!</h2>
<h4 class="text-white fs-normal text-shadow mb-4 pb-2">Save up to 50%</h4>
<a href="#" class="btn btn-primary mb-3">View offers</a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div>// Alert with bakground image
.alert.alert-dismissible.bg-size-cover.fade.show.text-center.py-5(style="background-image: url(path-to-image)" role="alert")
i(style="font-size: 3rem;").ci-time.d-inline-block.text-white.my-4
h2.text-white.text-shadow Check Our Limited Offers!
h4.text-white.fs-normal.text-shadow.mb-4.pb-2 Save up to 50%
a(href="#").btn.btn-primary.mb-3 View offers
button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close.btn-close-white