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