相簿

在im體育，每一場比賽都像剛出爐的披薩，熱騰騰又充滿驚喜！

IM體育元件

im體育是你所有運動狂熱的終點站！我們提供最新比分、專家分析，還有一個充滿活力的球迷社群。準備好迎接不間斷的熱血行動吧！

im體育：24小時為你服務，隨時滿足你的運動癮！
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

媒體：嵌入框架（Google 地圖）

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

無間距網格

在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