ブートストラップカードコンポーネント：完全な紹介-CSSチュートリアル-php.cn

Example Card Title

ホームページ

ウェブフロントエンド

CSSチュートリアル

ブートストラップカードコンポーネント：完全な紹介

Lisa Kudrow

Feb 08, 2025 am 10:36 AM

この記事では、視覚的に魅力的で応答性の高いWebレイアウトを作成するための汎用性の高いツールであるBootstrapのカードコンポーネントを調査します。最適なパフォーマンスのための使用、カスタマイズ、およびベストプラクティスをカバーします。

Bootstrap Card Component: a Complete Introduction

なぜブートストラップカードを使用するのか？主要なレスポンシブなWebフレームワークである

Bootstrapは、見事なレイアウトの作成を簡素化します。その利点には次のものがあります：

楽なレスポンシブデザイン：

最小限のHTMLおよびCSSの知識が必要です。

モバイルファーストアプローチ：モバイル応答性に優先順位を付けます
クロスブラウザーの互換性：メジャーブラウザ全体でシームレスに動作します。
FlexBoxベースのグリッド：合理化アライメントと間隔
ボタン、モーダル、カードなどの再利用可能な要素を提供します。最新のブートストラップバージョンは、パネルやサムネイルなどの古い要素を置き換えて、カードコンポーネントを大幅に強化します。
ブートストラップカードの理解ブートストラップカードは、さまざまなコンテンツタイプ（テキスト、画像、マルチメディア）の柔軟なコンテナです。主な機能には次のものがあります

シンプルさ：

や

。

などのクラスを使用して簡単に作成できますコンテンツの汎用性：

タイトル、画像、リストなどをサポートしています

応答性：

カスタマイズ：ユーティリティクラスは、スタイリングの調整（色、境界、整列）を可能にします。 card-bodycard-text高度なレイアウト：
必須のブートストラップカードクラス
キークラスの概要：
card：メインカードコンテナ。

card-body：カードのコンテンツ領域。

card-title：カードのタイトルをスタイルします（<h3></h3>または<h4></h4>でよく使用されます）。

card-text：カード内の標準テキストのスタイル。

card-header：ヘッダーセクションを作成します

：フッターセクションを作成します card-footer
/
：画像を上または下部に配置します。card-img-top card-img-bottom
/
：カード内のリストを作成します list-grouplist-group-item：幅と高さの等しいカードをグループ化します。

card-group：（ブートストラップ5で非推奨）カードを間隔で並べます

/card-deck：テキストと背景色のユーティリティクラス。

text-*bg-*ブートストラップの統合

cdnを介してブートストラップを含めるか、https://www.php.cn/link/735dd629ab696e3a1bfcc0fe0d687bb1からダウンロードしてください。これが
：
のCDN例ですこれにより、CDNを使用してセットアップを簡単に使用します。より詳細なセットアップオプションについては、Bootstrapドキュメントを参照してください。 index.html
基本的なカードの作成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <title>Bootstrap Card Example</title> </head> <body> <div class="container mt-5"> <div class="card" style="width: 18rem;"> <div class="card-header bg-primary text-white"> Example Card Header </div> <div class="card-body"> <h5 id="Example-Card-Title">Example Card Title</h5> <p class="card-text">This is an example card using Bootstrap 5.</p> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <🎜> </body> </html>
ログイン後にコピー

シンプルなカードは、コンテンツに
、、、および
を含むコンテナとして
クラスを使用します。例とスクリーンショットは、元のテキストに記載されており、水平カード、リストグループ、ヘッダー、フッター、画像オーバーレイ、画像キャップを示しています。これらはすべて、元のテキストに視覚的に説明されています .card.card-bodyレスポンシブデザイン.card-title.card-text .card-img-topBootstrapのグリッドシステムにより、応答性が保証されます。元のテキストは、行と列のクラスを使用してレスポンシブカードレイアウトを示すコードの例とスクリーンショットを提供します。

カードのサイズの調整インラインスタイル（
）またはブートストラップユーティリティクラスを使用して、
カード幅と高さを制御します。元のテキストは、例とスクリーンショットを提供します。また、より良いスケーラビリティを得るために、新しいブートストラップバージョンの
ユニットへのシフトについても説明します。
カードのスタイリング
背景、テキスト、ボーダーの色については、
、style="width: 10rem;"、remなどのユーティリティクラスを使用して、カードの外観をカスタマイズします。さまざまなスタイルを紹介する例とスクリーンショットは、元のテキストに含まれています。ヘッダースタイルの使用も説明されています

高度なレイアウト

元のテキストの詳細は、card-group（等しいサイズの添付カード用）を使用して高度なレイアウトを作成し、グリッドシステム（間隔カード用）をcard-deckに置き換え、ブートストラップ5にcard-columnsの存在しないことを使用して作成します。 CSSメーソンや石工などの代替案を提案します。視覚的な例が提供されています。

パフォーマンスの最適化

この記事は、エッセンシャルパフォーマンスの最適化手法で終わります：怠zyな読み込み画像、画像サイズの最適化、CSS/JSの模倣、アイコンにSVGを使用し、リソースのプリロード/プリフェッチの削減、フォントの最適化。コードの例は、ベストプラクティスを示しています

結論
ブートストラップカードは、モダンでレスポンシブなWebレイアウトを作成するための強力なツールです。この記事では、基本的な使用法、カスタマイズ、高度なレイアウト、パフォーマンスの最適化をカバーする包括的なガイドを提供します。元のテキストのスクリーンショットとコードの例は、ここで説明する概念を理解するために不可欠です。