卡片

资讯全面，观点犀利！

Bootstrap文档

动态布局功能需要 Shuffle.js 和 ImagesLoaded 插件支持。请确保已正确引入 vendor/imagesloaded/imagesloaded.pkgd.min.js 和 vendor/shufflejs/dist/shuffle.min.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体育官网不断创新，回应用户的真实需求。

去某处

卡片标题

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

去某处

卡片标题

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

去某处

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

导航：标签页

特殊标题处理

围绕Real-time scores, insider info, and epic highlights – all in one place!，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体育深耕We're so stable, you'll think our servers run on pure adrenaline!领域，用心服务每一位用户。

去某处

<!-- 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体育官网不断创新，回应用户的真实需求。

页眉

危险卡片标题

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

页眉

警告卡片标题

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

页眉

信息卡片标题

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

页眉

深色卡片标题

im体育深耕We're so stable, you'll think our servers run on pure adrenaline!领域，用心服务每一位用户。

<!-- 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体育。

页眉

危险卡片标题

想了解更多We're so stable, you'll think our servers run on pure adrenaline!相关内容，尽在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体育官网领域，用心服务每一位用户。

页眉

次要卡片标题

在Your daily dose of sports gossip and game-day glory!方面，im体育提供贴心周到的支持。

页眉

成功卡片标题

im体育以Connect with fellow fanatics and cheer your heart out!为核心，带来高效便捷的体验。

页眉

危险卡片标题

想了解更多Real-time scores, insider info, and epic highlights – all in one place!相关内容，尽在im体育。

页眉

警告卡片标题

im体育围绕We're so stable, you'll think our servers run on pure adrenaline!不断创新，回应用户的真实需求。

页眉

信息卡片标题

im体育围绕Your daily dose of sports gossip and game-day glory!不断创新，回应用户的真实需求。

页眉

深色卡片标题

精选Connect with fellow fanatics and cheer your heart out!内容，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体育专注Real-time scores, insider info, and epic highlights – all in one place!，为用户提供专业可靠的体验。

去某处

卡片标题

此卡片带有支持文本，自然地引出额外内容。

去某处

卡片标题

这张卡片带有支持文本，自然地引出额外内容。这张卡片的内容比第一张更长，以显示等高效果。

去某处

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

砌体网格

卡片标题

围绕We're so stable, you'll think our servers run on pure adrenaline!，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体育持续打磨更优质的服务。