Bootstrap のカードは、複数のバリアントとオプションを備えた柔軟で拡張可能なコンテンツ コンテナーを提供します。
約
カードは、柔軟で拡張可能なコンテンツ コンテナーです。ヘッダーとフッターのオプション、さまざまなコンテンツ、コンテキストに応じた背景色、および強力な表示オプションが含まれています。Bootstrap 3 に慣れている場合は、古いパネル、ウェル、およびサムネイルがカードに置き換えられます。これらのコンポーネントと同様の機能は、カードの修飾子クラスとして利用できます。
例
カードは可能な限り少ないマークアップとスタイルで構築されていますが、それでも大量の制御とカスタマイズを提供することができます. フレックスボックスで構築されているため、簡単に配置でき、他の Bootstrap コンポーネントとうまく組み合わせることができます。margin
デフォルトでは何もないため、必要に応じてスペーシング ユーティリティを使用してください。
以下は、コンテンツが混在し、幅が固定された基本的なカードの例です。カードには開始時の固定幅がないため、親要素の全幅を自然に埋めます。これは、さまざまなサイズ オプションで簡単にカスタマイズできます。
カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
どこかへ行きます
コンテンツ タイプ
カードは、画像、テキスト、リスト グループ、リンクなど、さまざまなコンテンツをサポートしています。以下は、サポートされているものの例です。
体
カードの構成要素は.card-body
. カード内にパディング セクションが必要な場合はいつでも使用してください。
タイトル、テキスト、およびリンク
カードタイトルはタグ.card-title
に付けて使用します。同様に、タグ<h*>
に追加することで、リンクが追加され、隣り合わせに配置されます。.card-link
<a>
.card-subtitle
字幕は、<h*>
タグにa を追加して使用します。.card-title
と の.card-subtitle
アイテムがアイテムに配置されている場合.card-body
、カードのタイトルとサブタイトルがうまく配置されます。
カードのタイトル
カードのサブタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
カードリンク
別のリンク
画像
.card-img-top
カードの上部に画像を配置します。で.card-text
、カードにテキストを追加できます。内部のテキスト.card-text
は、標準の HTML タグを使用してスタイルを設定することもできます。
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
グループの一覧表示
フラッシュ リスト グループを使用して、カード内のコンテンツのリストを作成します。
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
台所の流し
複数のコンテンツ タイプを組み合わせて必要なカードを作成するか、そこにすべてを投げ込みます。以下に示すのは、画像スタイル、ブロック、テキスト スタイル、およびリスト グループです。これらはすべて固定幅のカードに収められています。
カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- エロスの前庭
カード内にオプションのヘッダーやフッターを追加します。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
カード ヘッダーは、要素に追加.card-header
することでスタイルを設定できます。<h*>
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
サイジング
カードは特定のwidth
開始を想定していないため、特に明記しない限り、幅は 100% になります。カスタム CSS、グリッド クラス、グリッド Sass ミックスイン、またはユーティリティを使用して、必要に応じてこれを変更できます。
グリッド マークアップの使用
グリッドを使用して、必要に応じてカードを列と行にラップします。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
ユーティリティの使用
カードの幅をすばやく設定するには、いくつかの利用可能なサイジング ユーティリティを使用します。
カードのタイトル
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
ボタン
カードのタイトル
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
ボタン
カスタム CSS の使用
スタイルシートでカスタム CSS を使用するか、インライン スタイルとして幅を設定します。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
テキストの配置
テキスト配置クラスを使用して、カード全体または特定の部分のテキスト配置をすばやく変更できます。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
ナビゲーション
Bootstrap のナビゲーション コンポーネントを使用して、カードのヘッダー (またはブロック) にナビゲーションを追加します。
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
タイトルの特別扱い
追加コンテンツへの自然な導入として、以下のサポート テキストを使用します。
どこかへ行きます
画像
カードには、画像を操作するためのいくつかのオプションが含まれています。カードの両端に「画像キャップ」を追加するか、画像をカード コンテンツに重ねるか、単純に画像をカードに埋め込むかを選択します。
画像キャップ
ヘッダーとフッターと同様に、カードには上部と下部の「画像キャップ」、つまりカードの上部または下部に画像を含めることができます。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
画像オーバーレイ
画像をカードの背景に変えて、カードのテキストを重ねます。画像によっては、追加のスタイルやユーティリティが必要な場合と必要でない場合があります。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
コンテンツは画像の高さよりも大きくしないでください。コンテンツが画像よりも大きい場合、コンテンツは画像の外に表示されます。
水平
グリッドとユーティリティ クラスの組み合わせを使用して、カードをモバイル フレンドリーでレスポンシブな方法で水平にすることができます。以下の例では、グリッドのガターを削除し、クラスを.no-gutters
使用してブレークポイントでカードを水平にします。カードの内容によっては、さらに調整が必要になる場合があります。.col-md-*
md
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのスタイル
カードには、背景、境界線、および色をカスタマイズするためのさまざまなオプションが含まれています。
背景と色
テキストおよび背景ユーティリティを使用して、カードの外観を変更します。
メインカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
サブカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
危険カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
警告カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
情報カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ライトカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ダークカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only
色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
国境
カードのだけを変更するには、ボーダー ユーティリティを使用border-color
します。以下に示すように、カードのコンテンツの.text-{color}
親またはサブセットにクラスを配置できることに注意してください。.card
メインカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
サブカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
危険カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
警告カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
情報カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ライトカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
ダークカードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
Mixins ユーティリティ
必要に応じて、カードのヘッダーとフッターの境界線を変更したりbackground-color
、.bg-transparent
.
成功カードのタイトル
カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。
カードのレイアウト
Bootstrap には、カード内のコンテンツのスタイルを設定するだけでなく、一連のカードをレイアウトするためのオプションがいくつか含まれています。当面の間、これらのレイアウト オプションはまだ対応していません。
カードグループ
カード グループを使用して、同じ幅と高さの列を持つ単一の添付要素としてカードをレンダリングします。カード グループは積み重ねられた状態から始まり、ブレークポイントdisplay: flex;
から始まる均一な寸法で接続されます。sm
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
最終更新: 3 分前
フッター付きのカード グループを使用する場合、そのコンテンツは自動的に整列されます。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
カードデッキ
互いにくっついていない同じ幅と高さのカードのセットが必要ですか? カードデッキを使用。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
最終更新: 3 分前
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
最終更新: 3 分前
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
最終更新: 3 分前
カード グループと同様に、デッキのカード フッターは自動的に整列します。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このコンテンツは少し長くなります。
カードのタイトル
このカードには、追加コンテンツへの自然な導入として、以下のサポート テキストがあります。
カードのタイトル
これは、追加のコンテンツへの自然な導入として、以下のサポート テキストを含む幅の広いカードです。このカードには、同じ高さのアクションを示す最初のカードよりも長いコンテンツがあります。
グリッドカード
Bootstrap グリッド システムとその.row-cols
クラスを使用して、行ごとに表示するグリッド列 (カードにラップする) の数を制御します。たとえば、ここで.row-cols-1
はカードを 1 列に配置し、.row-cols-md-2
4 枚のカードを複数の行にまたがって同じ幅になるように分割しています。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
に変更する.row-cols-3
と、4 番目のカード ラップが表示されます。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
同じ高さが必要な場合は.h-100
、カードに追加します。デフォルトで同じ高さが必要な場合は$card-height: 100%
、Sass で設定できます。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。
カードのタイトル
これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。
カード列
カードをでラップすることにより、CSS だけで組積造のような列に編成できます.card-columns
。カードはcolumn
、簡単に配置できるように、フレックスボックスではなく CSS プロパティで構築されています。カードは上から下、左から右に並べられています。
注意喚起!カード列のマイレージは異なる場合があります。カードが列をまたいで壊れないようにするために、それらをdisplay: inline-block
asに設定する必要がありますが、これ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 分前
カード列は、コードを追加して拡張およびカスタマイズすることもできます。以下に示すのは、.card-columns
私たちが使用するのと同じ CSS (CSS 列) を使用して、列の数を変更するためのレスポンシブ層のセットを生成するクラスの拡張です。