卡片组件

优质

小牛编辑

128浏览

2023-12-01

在此模板中，卡片组件是使用最广泛的。你可以将其用于显示图表、文本块等。有许多不同的样式，我们将在下面进行介绍。

默认卡片标记

<div class="card">
  <div class="card-header">
    <h3 class="card-title">默认卡片示例</h3>
    <div class="card-tools">
      <!-- 按钮，标签和其他东西都可以放在这里！ -->
      <!-- 例如，这里是个标签 -->
      <span class="badge badge-primary">标签</span>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    这里是卡片内容
  </div>
  <!-- /.card-body -->
  <div class="card-footer">
    这里是卡片底部
  </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 属性为卡片提供折叠或移除的功能。按钮位于卡片标题的工具中。

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">卡片工具</h3>

    <div class="card-tools">
      <!-- 点击后会使卡片最大化 -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
      <!-- 点击后会使卡片折叠 -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      <!-- 点击后会移除卡片 -->
      <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">
    这里是卡片内容
  </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>