カード
Bootstrap のカードは、複数のバリアントとオプションを備えた柔軟で拡張可能なコンテンツ コンテナーを提供します。
約
カードは、柔軟で拡張可能なコンテンツ コンテナーです。ヘッダーとフッターのオプション、さまざまなコンテンツ、コンテキストに応じた背景色、および強力な表示オプションが含まれています。Bootstrap 3 に慣れている場合は、古いパネル、ウェル、およびサムネイルがカードに置き換えられます。これらのコンポーネントと同様の機能は、カードの修飾子クラスとして利用できます。
例
カードは可能な限り少ないマークアップとスタイルで構築されていますが、それでも大量の制御とカスタマイズを提供することができます. フレックスボックスで構築されているため、簡単に配置でき、他の Bootstrap コンポーネントとうまく組み合わせることができます。marginデフォルトでは何もないため、必要に応じてスペーシング ユーティリティを使用してください。
以下は、コンテンツが混在し、幅が固定された基本的なカードの例です。カードには開始時の固定幅がないため、親要素の全幅を自然に埋めます。これは、さまざまなサイズ オプションで簡単にカスタマイズできます。
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>コンテンツ タイプ
カードは、画像、テキスト、リスト グループ、リンクなど、さまざまなコンテンツをサポートしています。以下は、サポートされているものの例です。
体
カードの構成要素は.card-body. カード内にパディング セクションが必要な場合はいつでも使用してください。
これは、カード本体内のテキストです。
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>タイトル、テキスト、およびリンク
カードタイトルはタグ.card-titleに付けて使用します。同様に、タグ<h*>に追加することで、リンクが追加され、隣り合わせに配置されます。.card-link<a>
.card-subtitle字幕は、<h*>タグにa を追加して使用します。.card-titleと の.card-subtitleアイテムがアイテムに配置されている場合.card-body、カードのタイトルとサブタイトルがうまく配置されます。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>画像
.card-img-topカードの上部に画像を配置します。で.card-text、カードにテキストを追加できます。内部のテキスト.card-textは、標準の HTML タグを使用してスタイルを設定することもできます。
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>グループの一覧表示
フラッシュ リスト グループを使用して、カード内のコンテンツのリストを作成します。
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
特徴
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>台所の流し
複数のコンテンツ タイプを組み合わせて必要なカードを作成するか、そこにすべてを投げ込みます。以下に示すのは、画像スタイル、ブロック、テキスト スタイル、およびリスト グループです。これらはすべて固定幅のカードに収められています。
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>ヘッダーとフッター
カード内にオプションのヘッダーやフッターを追加します。
特徴
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>カード ヘッダーは、要素に追加.card-headerすることでスタイルを設定できます。<h*>
特徴
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
見積もり
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
特徴
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>サイジング
カードは特定のwidth開始を想定していないため、特に明記しない限り、幅は 100% になります。カスタム CSS、グリッド クラス、グリッド Sass ミックスイン、またはユーティリティを使用して、必要に応じてこれを変更できます。
グリッド マークアップの使用
グリッドを使用して、必要に応じてカードを列と行にラップします。
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>ユーティリティの使用
カードの幅をすばやく設定するには、いくつかの利用可能なサイジング ユーティリティを使用します。
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>カスタム CSS の使用
スタイルシートでカスタム CSS を使用するか、インライン スタイルとして幅を設定します。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>テキストの配置
テキスト配置クラスを使用して、カード全体または特定の部分のテキスト配置をすばやく変更できます。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>ナビゲーション
Bootstrap のナビゲーション コンポーネントを使用して、カードのヘッダー (またはブロック) にナビゲーションを追加します。
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>画像
カードには、画像を操作するためのいくつかのオプションが含まれています。カードの両端に「画像キャップ」を追加するか、画像をカード コンテンツに重ねるか、単純に画像をカードに埋め込むかを選択します。
画像キャップ
ヘッダーとフッターと同様に、カードには上部と下部の「画像キャップ」、つまりカードの上部または下部に画像を含めることができます。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>画像オーバーレイ
画像をカードの背景に変えて、カードのテキストを重ねます。画像によっては、追加のスタイルやユーティリティが必要な場合と必要でない場合があります。
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>コンテンツは画像の高さよりも大きくしないでください。コンテンツが画像よりも大きい場合、コンテンツは画像の外に表示されます。
カードのスタイル
カードには、背景、境界線、および色をカスタマイズするためのさまざまなオプションが含まれています。
背景と色
テキストおよび背景ユーティリティを使用して、カードの外観を変更します。
ヘッダ
メインカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
サブカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
危険カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
警告カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
情報カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
ライトカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
ダークカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
国境
カードのだけを変更するには、ボーダー ユーティリティを使用border-colorします。以下に示すように、カードのコンテンツの.text-{color}親またはサブセットにクラスを配置できることに注意してください。.card
ヘッダ
メインカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
サブカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
危険カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
警告カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
情報カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
ライトカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ヘッダ
ダークカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Mixins ユーティリティ
必要に応じて、カードのヘッダーとフッターの境界線を変更したりbackground-color、.bg-transparent.
ヘッダ
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>カードのレイアウト
Bootstrap には、カード内のコンテンツのスタイルを設定するだけでなく、一連のカードをレイアウトするためのオプションがいくつか含まれています。当面の間、これらのレイアウト オプションはまだ対応していません。
カードグループ
カード グループを使用して、同じ幅と高さの列を持つ単一の添付要素としてカードをレンダリングします。カード グループはdisplay: flex;、均一なサイジングを実現するために使用します。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
最終更新: 3 分前
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>フッター付きのカード グループを使用する場合、そのコンテンツは自動的に整列されます。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>カードデッキ
互いにくっついていない同じ幅と高さのカードのセットが必要ですか? カードデッキを使用。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
最終更新: 3 分前
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>カード グループと同様に、デッキのカード フッターは自動的に整列します。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
カードのタイトル
これは、追加のコンテ���ツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>カード列
カードをでラップすることにより、CSS だけで組積造のような列に編成できます.card-columns。カードはcolumn、簡単に配置できるように、フレックスボックスではなく CSS プロパティで構築されています。カードは上から下、左から右に並べられています。
注意喚起！カード列のマイレージは異なる場合があります。カードが列をまたいで壊れないようにするために、それらをdisplay: inline-blockasに設定する必要がありますが、これcolumn-break-inside: avoidはまだ防弾ソリューションではありません。
新しい行に折り返されるカード タイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
最終更新: 3 分前
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数 posuere erat。
カードのタイトル
このカードには、通常のタイトルと、その下に短い段落のテキストがあります。
最終更新: 3 分前
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
カードのタイトル
これは別のカードで、下にタイトルとサポート テキストがあります。このカードには、全体的に少し高くするための追加コンテンツがいくつかあります。
最終更新: 3 分前
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>カード列は、コードを追加して拡張およびカスタマイズすることもできます。以下に示すのは、.card-columns私たちが使用するのと同じ CSS (CSS 列) を使用して、列の数を変更するためのレスポンシブ層のセットを生成するクラスの拡張です。
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}