实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (0)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 近期暂无比赛，请稍后再来查看。 | ||||
更新于 2026-06-21 20:36（北京时间）
立即购买 占位符
在赛事信息加载期间，西瓜体育的占位符设计将为您呈现清晰的赛程概览，确保您时刻掌握最新比赛动态。
直播平台文档
寬度
<!-- Width via col-* class -->
<span class="placeholder col-6"></span>
<!-- Width via w-* class -->
<span class="placeholder w-75"></span>
<!-- Width via style attribute -->
<span class="placeholder" style="width: 33%;"></span>// Width via col-* class
span.placeholder.col-6
// Width via w-* class
span.placeholder.w-75
// Width via style attribute
span(style="width: 33%;").placeholder
顏色
<!-- Default -->
<span class="placeholder col-12"></span>
<!-- Primary -->
<span class="placeholder col-12 bg-primary"></span>
<!-- Success -->
<span class="placeholder col-12 bg-success"></span>
<!-- Danger -->
<span class="placeholder col-12 bg-danger"></span>
<!-- Warning -->
<span class="placeholder col-12 bg-warning"></span>
<!-- Info -->
<span class="placeholder col-12 bg-info"></span>
<!-- Light -->
<span class="placeholder col-12 bg-light"></span>
<!-- Dark -->
<span class="placeholder col-12 bg-dark"></span>// Default
span.placeholder.col-12
// Primary
span.placeholder.col-12.bg-primary
// Success
span.placeholder.col-12.bg-success
// Danger
span.placeholder.col-12.bg-danger
// Warning
span.placeholder.col-12.bg-warning
// Info
span.placeholder.col-12.bg-info
// Light
span.placeholder.col-12.bg-light
// Dark
span.placeholder.col-12.bg-dark
尺寸
<!-- Large -->
<span class="placeholder col-12 placeholder-lg"></span>
<!-- Default -->
<span class="placeholder col-12"></span>
<!-- Small -->
<span class="placeholder col-12 placeholder-sm"></span>
<!-- Extra small -->
<span class="placeholder col-12 placeholder-xs"></span>// Large
span.placeholder.col-12.placeholder-lg
// Default
span.placeholder.col-12
// Small
span.placeholder.col-12.placeholder-sm
// Extra small
span.placeholder.col-12.placeholder-xs
動畫
<!-- Glow animation -->
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<!-- Wave animation -->
<span class="placeholder placeholder-wave col-12"></span>// Glow animation
p.placeholder-glow
span.placeholder.col-12
// Wave animation
span.placeholder.placeholder-wave.col-12
使用案例範例
<!-- Loading placeholders example -->
<div class="card border-0 shadow" aria-hidden="true">
<div class="position-relative placeholder-wave">
<div class="card-img-top placeholder ratio ratio-16x9"></div>
<i class="ci-image position-absolute top-50 start-50 translate-middle fs-1 text-muted opacity-50"></i>
</div>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder placeholder-sm col-7 me-2"></span>
<span class="placeholder placeholder-sm col-4"></span>
<span class="placeholder placeholder-sm col-4 me-2"></span>
<span class="placeholder placeholder-sm col-6"></span>
<span class="placeholder placeholder-sm col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6 placeholder-wave"></a>
</div>
</div>
// Loading placeholders example
.card.border-0.shadow(aria-hidden="true")
.position-relative.placeholder-wave
.card-img-top.placeholder.ratio.ratio-16x9
i.ci-image.position-absolute.top-50.start-50.translate-middle.fs-1.text-muted.opacity-50
.card-body
h5.card-title.placeholder-glow
span.placeholder.col-6
p.card-text.placeholder-glow
span.placeholder.placeholder-sm.col-7.me-2
span.placeholder.placeholder-sm.col-4
span.placeholder.placeholder-sm.col-4.me-2
span.placeholder.placeholder-sm.col-6
span.placeholder.placeholder-sm.col-8
a(href="#", tabindex="-1").btn.btn-primary.disabled.placeholder.col-6.placeholder-wave