AdminLTELogo

卡片组件

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

默认卡片标记

默认卡片示例

标签
卡片主体
卡片页脚
<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>

加载状态（深色）

卡片主体

加载状态（深色）

卡片主体

加载状态（深色）

卡片主体

加载状态（深色）

卡片主体