资讯卡片

内容爆棚，观点够辣！

im体育官方平台

动态布局全靠 Shuffle.js 和 ImagesLoaded 插件撑场子，记得引入 vendor 文件夹里的两个 JS 文件，按本页配置就能让卡片飞起来！

无图片

卡片标题

这是一段快速示例文本，用于补充卡片标题并构成卡片主体内容的大部分。

<!-- No image -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</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>

// No image
.card
  .card-body
    h5.card-title
      | Card title
    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体育提供贴心周到的支持。

前往某处

<!-- Alternative card style: no border + shadow -->
<div class="card border-0 shadow">
  <div class="card-body">
    <h5 class="card-title">Card title</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>

// Alternative card style: no border + shadow
.card.border-0.shadow
  .card-body
    h5.card-title
      | Card title
    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体育分析为核心，带来高效便捷的体验。

前往某处

<!-- Image on top -->
<div class="card">
  <img src="pat-to-image" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</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>

// Image on top
.card
  img(src="path-to-image", alt="Card image").card-img-top
  .card-body
    h5.card-title
      | Card title
    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体育。

前往某处

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</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>
  <img src="pat-to-image" class="card-img-bottom" alt="Card image">
</div>

// Image on bottom
.card
  .card-body
    h5.card-title
      | Card title
    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
  img(src="path-to-image", alt="Card image").card-img-bottom

水平布局

卡片标题

这是一张更宽的卡片，下方附有支持性文字，作为附加内容的自然引导。此内容稍长一些。

前往某处

<!-- Horizontal card layout -->
<div class="card" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-sm-4">
      <img src="pat-to-image" class="rounded-start" alt="Card image">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

// Horizontal card layout
.card(style="max-width: 540px;")
  .row.g-0
    .col-sm-4
      img(src="path-to-image", alt="Card image").rounded-start
    .col-sm-8
      .card-body
        h5.card-title
          | Card title
        p.card-text.fs-sm.text-muted
          | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        a.btn.btn-sm.btn-primary(href="#") Go somewhere

页眉和页脚

精选

特殊标题处理

下方附有支持性文字，作为附加内容的自然引导。

前往某处

3天前

<!-- Header and footer -->
<div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer fs-sm text-muted">3 days ago</div>
</div>

// Header and footer
.card.text-center
  .card-header Featured
  .card-body
    h5.card-title
      | Special title treatment
    p.card-text
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere
  .card-footer.fs-sm.text-muted 3 days ago

文本对齐

卡片标题

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

前往某处

卡片标题

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

前往某处

卡片标题

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

前往某处

<!-- Left aligned (default) -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Center aligned -->
<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-smtext-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Right aligned -->
<div class="card text-end">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Left aligned (default)
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

// Center aligned
.card.text-center
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

// Right aligned
.card.text-end
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

导航：标签页

特殊标题处理

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

前往某处

<!-- Tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Tabs inside card header
.card.text-center
  .card-header
    ul.nav.nav-tabs.card-header-tabs
      li.nav-item
        a.nav-link.active(href="#") Active
      li.nav-item
        a.nav-link(href="#") Link
      li.nav-item
        a.nav-link.disabled(href="#") Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

导航：胶囊式

特殊标题处理

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

前往某处

<!-- Pills inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Pills inside card header
.card.text-center
  .card-header
    ul.nav.nav-pills.card-header-pills
      li.nav-item
        a.nav-link.active(href="#") Active
      li.nav-item
        a.nav-link(href="#") Link
      li.nav-item
        a.nav-link.disabled(href="#") Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

卡片内的列表组

卡片标题

这是一段快速示例文本，用于补充卡片标题并构成卡片主体内容的大部分。

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

前往某处

卡片标题

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

Cras justo odio Dapibus ac facilisis in Vestibulum at eros

前往某处

im体育中文平台整合专业体育赛事直播功能，涵盖实时比赛资讯、互动交流及社区模块。用户可以快速获取比赛信息、参与活动并体验完整功能。平台界面清晰直观，操作顺畅，访问稳定可靠。整体体验高效专业，为用户提供安全、全面、便捷的在线体育娱乐平台。

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

卡片样式：背景与颜色

页眉

主要卡片标题

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

页眉

强调卡片标题

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

页眉

次要卡片标题

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

页眉

成功卡片标题

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

页眉

危险卡片标题

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

页眉

警告卡片标题

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

页眉

信息卡片标题

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

页眉

深色卡片标题

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

<!-- Primary card -->
<div class="card text-white bg-primary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Accent card -->
<div class="card bg-accent">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Secondary card -->
<div class="card bg-primary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Success card -->
<div class="card text-white bg-success">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Success card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card text-white bg-danger">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Danger card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card text-white bg-warning">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Warning card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card text-white bg-info">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Info card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card text-white bg-dark">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

// Primary card
.card.text-white.bg-primary
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Accent card
.card.text-white.bg-accent
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card.bg-secondary
  .card-header Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-white.bg-success
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-white.bg-danger
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-white.bg-warning
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-white.bg-info
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-white.bg-dark
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

卡片样式：淡色背景与颜色

页眉

主要卡片标题

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

页眉

强调卡片标题

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

页眉

成功卡片标题

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

页眉

危险卡片标题

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

页眉

警告卡片标题

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

页眉

信息卡片标题

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

页眉

深色卡片标题

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

<!-- Faded primary card -->
<div class="card text-primary bg-faded-primary border-primary">
  <div class="card-header border-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded accent card -->
<div class="card text-accent bg-faded-accent border-accent">
  <div class="card-header border-accent">Header</div>
  <div class="card-body">
    <h5 class="card-title text-accent">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded success card -->
<div class="card text-success bg-faded-success border-success">
  <div class="card-header border-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded danger card -->
<div class="card text-danger bg-faded-danger border-danger">
  <div class="card-header border-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded warning card -->
<div class="card text-warning bg-faded-warning border-warning">
  <div class="card-header border-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded info card -->
<div class="card text-info bg-faded-info border-info">
  <div class="card-header border-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded dark card -->
<div class="card text-dark bg-faded-dark border-dark">
  <div class="card-header border-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-dark">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

// Faded primary card
.card.text-primary.bg-faded-primary.border-primary
  .card-header.border-primary Header
  .card-body
    h5.card-title.text-primary
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded accent card
.card.text-accent.bg-faded-accent.border-accent
  .card-header.border-accent Header
  .card-body
    h5.card-title.text-accent
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded success card
.card.text-white.bg-faded-success.border-success
  .card-header.border-success Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded danger card
.card.text-white.bg-faded-danger.border-danger
  .card-header.border-danger Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded warning card
.card.text-white.bg-faded-warning.border-warning
  .card-header.border-warning Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded info card
.card.text-white.bg-faded-info.border-info
  .card-header.border-info Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded dark card
.card.text-white.bg-faded-dark.border-dark
  .card-header.border-dark Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

卡片样式：边框与颜色

页眉

主要卡片标题

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

页眉

强调卡片标题

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

页眉

次要卡片标题

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

页眉

成功卡片标题

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

页眉

危险卡片标题

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

页眉

警告卡片标题

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

页眉

信息卡片标题

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

页眉

深色卡片标题

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

<!-- Primary card -->
<div class="card text-primary border-primary">
  <div class="card-header border-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Accent card -->
<div class="card text-accent border-accent">
  <div class="card-header border-accent">Header</div>
  <div class="card-body">
    <h5 class="card-title text-accent">Accent card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Secondary card -->
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Success card -->
<div class="card text-success border-success">
  <div class="card-header border-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card text-danger border-danger">
  <div class="card-header border-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card text-warning border-warning">
  <div class="card-header border-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card text-info border-info">
  <div class="card-header border-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card text-dark border-dark">
  <div class="card-header border-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

// Primary card
.card.text-primary.border-primary
  .card-header.border-primary
    | Header
  .card-body
    h5.card-title.text-primary
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Accent card
.card.text-accent.border-accent
  .card-header.border-accent
    | Header
  .card-body
    h5.card-title.text-accent
      | Accent card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card
  .card-header
    | Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-success.border-success
  .card-header.border-success
    | Header
  .card-body
    h5.card-title.text-success
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-danger.border-danger
  .card-header.border-danger
    | Header
  .card-body
    h5.card-title.text-danger
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-warning.border-warning
  .card-header.border-warning
    | Header
  .card-body
    h5.card-title.text-warning
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-info.border-info
  .card-header.border-info
    | Header
  .card-body
    h5.card-title.text-info
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-dark.border-dark
  .card-header.border-dark
    | Header
  .card-body
    h5.card-title
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

卡片组

卡片标题

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

前往某处

卡片标题

此卡片下方附有支持性文字，作为附加内容的自然引导。

前往某处

卡片标题

这是一张更宽的卡片，下方附有支持性文字，作为附加内容的自然引导。此卡片内容比第一张更长，以展示等高布局效果。

前往某处

<!-- Card group -->
<div class="card-group">

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">This card has supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

// Card group
.card-group

  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This card has supporting text below as a natural lead-in to additional content.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere

瀑布流网格

卡片标题

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

最后更新于3分钟前

卡片标题

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

卡片标题

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

最后更新于3分钟前

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

最后更新于3分钟前

精选Your daily dose of sports gossip and game-day glory!内容，im体育与你一同发现更多精彩。

最后更新于3分钟前

im体育专注Connect with fellow fanatics and cheer your heart out!，为用户提供专业可靠的体验。

围绕Real-time scores, insider info, and epic highlights – all in one place!，im体育持续打磨更优质的服务。