カードコンポーネントはこのテンプレートで最も広く使用されているコンポーネントです。チャートの表示からテキストのブロックまで、あらゆる用途に使用できます。以下で説明するさまざまなスタイルがあります。
<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-headerに配置されたcard-toolsに配置されます。
<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>
.overlayに.darkを追加することで、ダークローディングスタイルを使用することもできます。
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>