加入购物车 画廊
im体育直播，让您身临其境感受体育的魅力！
IM体育组件
im体育是您一站式的体育乐园！我们为您带来最新赛况、专家解读和充满活力的球迷社区。准备好迎接不间断的精彩吧！
- im体育：全天候为您服务，满足您对体育的所有渴望！
- im体育：不容错过的精彩瞬间，每一帧都充满力量！
- im体育：与全球球迷零距离互动，为您的主队加油！
您的体育娱乐新主场！
媒体：图片
<!-- Image gallery -->
<div class="gallery">
<a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>// Image gallery
.gallery
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
媒体：视频
<!-- Video gallery -->
<div class="gallery">
<a href="link-to-youtube/vimeo-video" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery video caption</span>
</a>
</div>// Video gallery
.gallery
a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>').gallery-item.video-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery video caption
媒体：Iframe (Google地图)
<!-- Iframe (Google map) -->
<div class="gallery">
<a href="link-to-google-map-embed" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Google map embed</span>
</a>
</div>// Iframe (Google map)
.gallery
a(href="link-to-google-map-embed", data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>').gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Google map embed
带间隙的网格
<!-- Gallery grid with gutters -->
<div class="row gallery">
<!-- Item -->
<div class="col-xl-4 col-sm-6 mb-grid-gutter">
<a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>
<!-- Item -->
<div class="col-xl-4 col-sm-6 mb-grid-gutter">
....
</div>
<!-- Add as many columns with gallery item inside as you need -->
</div>// Gallery grid with gutters
.row.gallery
//- Item
.col-xl-4.col-sm-6.mb-grid-gutter
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Item
.col-xl-4.col-sm-6.mb-grid-gutter
...
//- Add as many columns with gallery item inside as you need
无间隙的网格
<!-- Gallery grid no gutters -->
<div class="row gallery g-0">
<!-- Item -->
<div class="col-xl-4 col-sm-6">
<a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>
<!-- Item -->
<div class="col-xl-4 col-sm-6">
....
</div>
<!-- Add as many columns with gallery item inside as you need -->
</div>// Gallery grid no gutters
.row.gallery.g-0
//- Item
.col-xl-4.col-sm-6
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Item
.col-xl-4.col-sm-6
...
//- Add as many columns with gallery item inside as you need
卡片内部
<!-- Gallery inside card -->
<div class="card gallery">
<a href="path-to-large-image" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
<div class="card-body">
<h5 class="card-title">Card with gallery thumbnail</h5>
<p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>// Gallery inside card
.card.gallery
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt"Gallery thumbnail")
.card-body
h5.card-title
| Card with gallery thumbnail
p.card-text.fs-sm.text-muted
| Some quick example text to build on the card title and make up the bulk of the card's content.
a.btn.btn-sm.btn-primary(href="#") Go somewhere
轮播内部
<!-- Gallery inside carousel -->
<div class="tns-carousel tns-nav-enabled gallery">
<div class="tns-carousel-inner" data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}'>
<!-- Item -->
<div>
<a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>
<!-- Add as many gallery items wrapped in divs as you need -->
</div>
</div>// Gallery inside carousel
.tns-carousel.tns-nav-enabled.gallery
.tns-carousel-inner(data-carousel-options='{"responsive": {"0":{"items":1},"576":{"items":2, "gutter": 20},"1200":{"items":3, "gutter": 30}}}')
//- Item
div
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Add as many gallery items wrapped in divs as you need