カードコンポーネント
カードコンポーネントはこのテンプレートで最も広く使用されているコンポーネントです。チャートの表示からテキストのブロックまで、あらゆる用途に使用できます。以下で説明する多くの異なるスタイルがあります。
デフォルトのカードマークアップ
デフォルトのカード例
ラベル
カードの本文
<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>
ローディング状態（ダーク）
カードの本文
ローディング状態（ダーク）
カードの本文
ローディング状態（ダーク）
カードの本文
ローディング状態（ダーク）
カードの本文