Cards Component

卡片组件是本模板中最广泛使用的组件。您可以用它来显示图表，也可以用来显示文本块。它有多种不同的样式，我们将在下面进行探讨。

默认卡片标记

默认卡片示例

标签

卡片主体

卡片页脚

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Default Card Example</h3>
    <div class="card-tools">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="badge badge-primary">Label</span>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
  <div class="card-footer">
    The footer of the card
  </div>
  <!-- /.card-footer -->
</div>
<!-- /.card -->

卡片变体

您可以通过添加任何上下文类来更改卡片的样式。

默认

默认卡片示例

卡片主体

卡片页脚

主要卡片示例

卡片主体

卡片页脚

次要卡片示例

卡片主体

卡片页脚

成功卡片示例

卡片主体

卡片页脚

信息卡片示例

卡片主体

卡片页脚

警告卡片示例

卡片主体

卡片页脚

危险卡片示例

卡片主体

卡片页脚

暗色卡片示例

卡片主体

卡片页脚

<div class="card">...</div>
<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
<div class="card card-dark">...</div>

轮廓

主要卡片示例

卡片主体

卡片页脚

次要卡片示例

卡片主体

卡片页脚

成功卡片示例

卡片主体

卡片页脚

信息卡片示例

卡片主体

卡片页脚

警告卡片示例

卡片主体

卡片页脚

危险卡片示例

卡片主体

卡片页脚

暗色卡片示例

卡片主体

卡片页脚

<div class="card card-outline card-primary">...</div>
<div class="card card-outline card-secondary">...</div>
<div class="card card-outline card-success">...</div>
<div class="card card-outline card-info">...</div>
<div class="card card-outline card-warning">...</div>
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>

背景颜色

主要卡片示例

卡片主体

卡片页脚

次要卡片示例

卡片主体

卡片页脚

成功卡片示例

卡片主体

卡片页脚

信息卡片示例

卡片主体

卡片页脚

警告卡片示例

卡片主体

卡片页脚

危险卡片示例

卡片主体

卡片页脚

暗色卡片示例

卡片主体

卡片页脚

<div class="card bg-primary">...</div>
<div class="card bg-secondary">...</div>
<div class="card bg-success">...</div>
<div class="card bg-info">...</div>
<div class="card bg-warning">...</div>
<div class="card bg-danger">...</div>
<div class="card bg-dark">...</div>

渐变背景颜色

主要卡片示例

卡片主体

卡片页脚

次要卡片示例

卡片主体

卡片页脚

成功卡片示例

卡片主体

卡片页脚

信息卡片示例

卡片主体

卡片页脚

警告卡片示例

卡片主体

卡片页脚

危险卡片示例

卡片主体

卡片页脚

暗色卡片示例

卡片主体

卡片页脚

<div class="card bg-gradient-primary">...</div>
<div class="card bg-gradient-secondary">...</div>
<div class="card bg-gradient-success">...</div>
<div class="card bg-gradient-info">...</div>
<div class="card bg-gradient-warning">...</div>
<div class="card bg-gradient-danger">...</div>
<div class="card bg-gradient-dark">...</div>

卡片工具

卡片可以包含用于触发特定事件或提供简单信息的工具。以下示例在卡片的页眉中使用了多个AdminLTE组件。

AdminLTE data-card-widget属性为卡片提供了折叠或删除的能力。按钮放置在card-tools中，card-tools放置在card-header中。

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Card Tools</h3>

    <div class="card-tools">
      <!-- This will cause the card to maximize when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
      <!-- This will cause the card to collapse when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      <!-- This will cause the card to be removed when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

加载样式

要模拟加载状态，只需将此代码放在.card关闭标签之前。

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

加载状态

卡片主体

加载状态

卡片主体

加载状态

卡片主体

加载状态

卡片主体

你也可以使用暗色加载样式，通过添加.dark到.overlay如此代码。

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

暗色加载状态

卡片主体

暗色加载状态

卡片主体

暗色加载状态

卡片主体

暗色加载状态

卡片主体