Bootstrap的卡片提供灵活且可扩展的内容容器,具有多种变体和选项。

We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called .card. The information inside the card usually goes inside the content (class .card-body). The content can have three types of elements inside: .card-title and .category. You can optionally add a .card-footer, if you want to place a call-to-action. You can change the color of the header using the card-header-*color attribute like this: card-header-primary | info | success | warning | danger | rose.”

如果你想在白色背景上使用这些卡片,可以使用“.card-plain”类删除它的阴影

卡片标题类型

The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: .card-header-icon or .card-header-text.

常规标题

类别小标题

这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......

全标头彩色

类别小标题

这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
language

这是Icon

这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......

Here is the Text

这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">常规标题</h4>
        <p class="category">类别小标题</p>
      </div>
      <div class="card-body">
      这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
        <div class="card-header card-header-danger">
            <h4 class="card-title">全标头彩色</h4>
            <p class="category">类别小标题</p>
        </div>
        <div class="card-body">
      这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
        </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
      <div class="card">
          <div class="card-header card-header-icon card-header-rose">
            <div class="card-icon">
              <i class="material-icons">language</i>
            </div>
          </div>
          <div class="card-body">
              <h4 class="card-title">这是Icon</h4>
             这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
          </div>
      </div>
  </div>

  <div class="col-md-6">
      <div class="card">
          <div class="card-header card-header-text card-header-primary">
            <div class="card-text">
              <h4 class="card-title">Here is the Text</h4>
            </div>
          </div>
          <div class="card-body">
      这个地方靠近巴塞罗那海滩和巴士站,步行只需2分钟,靠近“Naviglio”,在那里您可以享受巴塞罗那的主要夜生活......
          </div>
      </div>
  </div>
</div>

卡与动画 - 零件

We’ve created some special cards that can have actions under the header, you can activate those cards but adding the property data-header-animation="true". Info: After 20x hovers of one of these cards you can break it:-)

要停止中断效果,您可以转到assets js material-dashboard.js并找到变量breakCards = true并将其设置为false

Website Views

上次广告系列效果

<div class="row">
      <div class="col-md-6 ml-auto mr-auto">
        <div class="card card-chart">
          <div class="card-header card-header-rose" data-header-animation="true">
              <div class="ct-chart" id="websiteViewsChart"></div>
          </div>
          <div class="card-body">
              <div class="card-actions">
                  <button type="button" class="btn btn-danger btn-link fix-broken-card">
                    <i class="material-icons">build</i>修复标题!
                  </button>

                  <button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="Refresh">
                    <i class="material-icons">refresh</i>
                  </button>
                  <button type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Change Date">
                    <i class="material-icons">edit</i>
                  </button>
              </div>
              <h4 class="card-title">Website Views</h4>
              <p class="card-category">上次广告系列效果</p>
          </div>
          <div class="card-footer">
            <div class="stats">
                <i class="material-icons">access_time</i>Compaign已发送 2 几天前
            </div>
          </div>
      </div>
    </div>
  </div>

卡片图表

每日销售

55% 增加今天的销售额。

完成的任务

上次广告系列效果

<div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header card-chart card-header-warning">
          <div class="ct-chart" id="dailySalesChart"></div>
        </div>
        <div class="card-body">
          <h4 class="card-title">每日销售</h4>
          <p class="card-category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55%  </span>增加今天的销售额。</p>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="material-icons">access_time</i>更新 4 几分钟前
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
    <div class="card">
      <div class="card-header card-chart card-header-success">
        <div class="ct-chart" id="completedTasksChart"></div>
      </div>
      <div class="card-body">
        <h4 class="card-title">完成的任务</h4>
        <p class="card-category">上次广告系列效果</p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <i class="material-icons">access_time</i>
  更新 2 几分钟前
        </div>
      </div>
    </div>
    </div>
  </div>

// INFO: #dailySalesChart is initialised inside assets/js/material-dashboard.js on method initDocumentationCharts()

内容类型

卡支持各种内容,包括图像,文本,列表组,链接等。 以下是支持的示例。

身体

卡的构建块是.card-body。 无论何时需要卡片中的填充部分,请使用它。

这是卡体内的一些文字
<div class="card">
  <div class="card-body">
     这是卡体内的一些文字
  </div>
</div>

标题,文字和链接

通过将.card-title添加到<h>标签来使用卡片标题。 以同样的方式,通过将.card-link添加到<a>标记,添加链接并将它们放在一起。

通过在<h>标签中添加.card-subtitle来使用字幕。 如果.card-title.card-subtitle项放在.card-body项中,则卡标题和副标题很好地对齐。

卡片标题

卡字幕

一些快速示例文本构建在卡片标题上,并构成卡片内容的大部分内容

卡链接 卡另一个链接
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <h6 class="card-subtitle mb-2 text-muted">卡字幕</h6>
    <p class="card-text">一些快速示例文本构建在卡片标题上,并构成卡片内容的大部分内容</p>
    <a href="#0" class="card-link">卡链接</a>
    <a href="#0" class="card-link">卡另一个链接</a>
  </div>
</div>

图片

`.card-img-top将图像放在卡片的顶部。 使用.card-text,可以将文本添加到卡中。 .card-text`中的文本也可以使用标准HTML标记进行样式设置。

Card image cap

一些快速示例文本构建在卡片标题上,并构成卡片内容的大部分内容

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">一些快速示例文本构建在卡片标题上,并构成卡片内容的大部分内容</p>
  </div>
</div>

列出组

使用刷新列表组创建卡中的内容列表。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 20rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
精选
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card card-nav-tabs" style="width: 20rem;">
  <div class="card-header card-header-danger">
精选</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

页眉页脚

添加可选标头和

精选

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card card-nav-tabs">
  <div class="card-header card-header-warning">
  精选
  </div>
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

Card headers can be styled by adding .card-header to <h*> elements.

精选

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card card-nav-tabs">
  <h4 class="card-header card-header-info">精选</h4>
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>
quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="card card-nav-tabs">
  <div class="card-header card-header-success">
quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
精选

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card card-nav-tabs text-center">
  <div class="card-header card-header-primary">
  精选
  </div>
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
  <div class="card-footer text-muted">
    2 几天前
  </div>
</div>

文字对齐

您可以使用我们的[文本对齐类]({{site.baseurl}} docs {{site.docs_version}} utilities text#text-alignment)快速更改任何卡片的文本对齐方式(完整或特定部分)。

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

<div class="card text-center" style="width: 20rem;">
 <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

导航

使用Bootstrap的[nav components]({{site.baseurl}} docs {{site.docs_version}} components navs)向卡片的标题(或块)添加一些导航。

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card text-center">
  <div class="card-header card-header-rose">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#0">活性</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#0">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#0">残障人士</a>
      </li>
    </ul>
  </div>
   <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

特殊标题处理

使用下面的支持文本作为添加内容的自然引入

去某地
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#0">活性</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#0">链接</a>
      </li>
      <li class="nav-item">
            <a class="nav-link disabled" href="#0">残障人士</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">特殊标题处理</h4>
    <p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
    <a href="#0" class="btn btn-primary">去某地</a>
  </div>
</div>

图片

卡片包含一些处理图像的选项。 选择在卡的任一端添加“图像大写”,用卡片内容覆盖图像,或者只是将图像嵌入卡片中。

图片上限

与页眉和页脚类似,卡片可以包括顶部和底部“图像上限” - 卡片顶部或底部的图像。

Card image cap

卡片标题

这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。

持续 更新 3 几分钟前

卡片标题

这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。

持续 更新 3 几分钟前

Card image cap
<div class="card mb-3">
  <img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
    <p class="card-text"><small class="text-muted">持续 更新 3 几分钟前</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
    <p class="card-text"><small class="text-muted">持续 更新 3 几分钟前</small></p>
  </div>
  <img class="card-img-bottom" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
</div>

图像叠加

将图像转换为卡片背景并覆盖卡片的文本。 根据图像,您可能需要或可能不需要其他样式或实用程序。

Card image

卡片标题

这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。

持续 更新 3 几分钟前

<div class="card bg-dark text-white">
  <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">这是一张更宽的卡片,下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
    <p class="card-text">持续 更新 3 几分钟前</p>
  </div>
</div>

例子

博客卡片 - 零件

时尚

不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......

<div class="card card-blog">
    <div class="card-header card-header-image">
        <a href="#pablo">
            <img class="img" src="https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <div class="card-title">
      今年夏天会很棒
            </div>
        </a>
    </div>
    <div class="card-body">
        <h6 class="card-category text-info">时尚</h6>
        <p class="card-description">
 不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......
        </p>
    </div>
</div>
<div class="card bg-info">
    <div class="card-body">
        <h5 class="card-category card-category-social">
            <i class="fa fa-twitter"></i> Twitter
        </h5>
        <h4 class="card-title">
            <a href="#pablo"> "你不必为了建立一个美妙的商业和生活而牺牲快乐"</a>
        </h4>

        <div class="card-stats">
            <div class="author">
                <a href="#pablo">
                   <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised">
                   <span>Tania Andrew</span>
                </a>
            </div>
           <div class="stats ml-auto">
                <i class="material-icons">favorite</i> 2.4K &#xB7;
                <i class="material-icons">share</i> 45
            </div>
        </div>
    </div>
</div>
<div class="card">
  <div class="card-body ">
        <h6 class="card-category text-danger">
            <i class="material-icons">trending_up</i>趋势
        </h6>
        <h4 class="card-title">
            <a href="#pablo">发展您的业务开始关注您的员工</a>
        </h4>

    </div>
    <div class="card-footer ">
            <div class="author">
                <a href="#pablo">
                   <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised">
                   <span>Lord Alex</span>
                </a>
            </div>
           <div class="stats ml-auto">
                <i class="material-icons">favorite</i> 342 &#xB7;
                <i class="material-icons">chat_bubble</i> 45
            </div>
        </div>
      </div>

档案卡 - 零件

Alec Thompson

CEO / Co-Founder
<div class="card card-profile ml-auto mr-auto" style="max-width: 360px">
  <div class="card-header card-header-image">
        <a href="#pablo">
            <img class="img" src="https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        </a>
    </div>

    <div class="card-body ">
        <h4 class="card-title">Alec Thompson</h4>
        <h6 class="card-category text-gray">CEO / Co-Founder</h6>
    </div>
    <div class="card-footer justify-content-center">
        <a href="#pablo" class="btn btn-just-icon btn-twitter btn-round">
            <i class="fa fa-twitter"></i>
        </a>
        <a href="#pablo" class="btn btn-just-icon btn-facebook btn-round">
            <i class="fa fa-facebook-square"></i>
        </a>
        <a href="#pablo" class="btn btn-just-icon btn-google btn-round">
            <i class="fa fa-google"></i>
        </a>
    </div>
</div>

完整的背景卡 - 零件

市场上的生产力应用程序

最佳生产力应用程序

不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......

subject阅读文章 watch_later稍后观看
<div class="card card-background" style="background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
  <div class="card-body">
    <h6 class="card-category text-info">市场上的生产力应用程序</h6>
    <a href="#pablo">
           <h3 class="card-title">最佳生产力应用程序</h3>
      </a>
      <p class="card-description">
   不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......
      </p>
    <a href="#pablo" class="btn btn-white btn-link">
      <i class="material-icons">subject</i>阅读文章
    </a>
    <a href="#pablo" class="btn btn-white btn-link">
      <i class="material-icons">watch_later</i>稍后观看
    </a>
  </div>
</div>

定价卡 - 零件

business

$69

如果您的公司规模在11到99人之间,这很好。

选择计划
<div class="row">
  <div class="col-md-4 ml-auto mr-auto">
    <div class="card card-pricing bg-primary"><div class="card-body ">
        <div class="card-icon">
            <i class="material-icons text-white">business</i>
        </div>
        <h3 class="card-title">$69</h3>
        <p class="card-description">
   如果您的公司规模在11到99人之间,这很好。
        </p>
        <a href="#pablo" class="btn btn-white btn-round">选择计划</a>
        </div>
    </div>
  </div>
</div>

旋转卡 - 零件

完整的背景卡

此背景卡将在悬停时旋转

不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......

管理邮政

作为管理员,您可以使用快捷方式编辑,查看或删除帖子。

<div class="row">
  <div class="col-md-6 ml-auto mr-auto">
    <div class="rotating-card-container">
        <div class="card card-rotate card-background">
            <div class="front front-background" style="background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
                <div class="card-body">
                    <h6 class="card-category">完整的背景卡</h6>
                    <a href="#pablo">
                        <h3 class="card-title">此背景卡将在悬停时旋转</h3>
                    </a>
                    <p class="card-description">
               不要害怕真相,因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计,但背面是......
                    </p>
                </div>
            </div>

            <div class="back back-background" style="background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
                <div class="card-body">
                    <h5 class="card-title">
               管理邮政
                    </h5>
                    <p class="card-description">作为管理员,您可以使用快捷方式编辑,查看或删除帖子。</p>
                    <div class="footer justify-content-center">
                        <a href="#pablo" class="btn btn-info btn-just-icon btn-fill btn-round">
                            <i class="material-icons">subject</i>
                        </a>
                        <a href="#pablo" class="btn btn-success btn-just-icon btn-fill btn-round btn-wd">
                            <i class="material-icons">mode_edit</i>
                        </a>
                        <a href="#pablo" class="btn btn-danger btn-just-icon btn-fill btn-round">
                            <i class="material-icons">delete</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>