图库浏览

在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 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

无间距网格

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

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

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

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

精选im体育数据内容，im体育与你一同发现更多精彩。

im体育专注im电竞，为用户提供专业可靠的体验。

<!-- 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

轮播内部

围绕im体育分析，im体育持续打磨更优质的服务。

im体育深耕im体育官网领域，用心服务每一位用户。

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

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

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

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

<!-- 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