卡组件是此模板中使用最广泛的组件。您可以使用它来显示图表或文本块。它有许多不同的样式，我们将在下面探讨。
<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 属性提供卡片折叠或移除的能力。按钮放置在卡头中的 CardTool 中。
<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 -->
要模拟加载状态，只需将此代码放在 <code class="highlighter-rouge">.card</code> 结束标记之前。
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
您还可以使用深色加载样式，方法是在 <code class="highlighter-rouge">.overlay</code> 中添加 <code class="highlighter-rouge">.dark</code>，如下所示。
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>