検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップカードコンポーネント：完全な紹介

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

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-08 10:36:13650ブラウズ

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

Bootstrap Card Component: a Complete Introduction

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

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

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

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

や

。

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

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

応答性：
    ブートストラップのグリッドシステムを使用して、さまざまな画面サイズに適応します。
  • カスタマイズ：ユーティリティクラスは、スタイリングの調整（色、境界、整列）を可能にします。 card-bodycard-text高度なレイアウト：
    • カードグループ、デッキ（ブートストラップ5で非推奨）、および複雑な配置のための列レイアウトをサポートします。
  • 必須のブートストラップカードクラス
  • キークラスの概要：
    • 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

    基本的なカードの作成
    <code class="language-html"><!DOCTYPE html>


    <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>


    <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 class="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>

    

</code>

    シンプルなカードは、コンテンツに

    、、、および

    を含むコンテナとして

    クラスを使用します。 例とスクリーンショットは、元のテキストに記載されており、水平カード、リストグループ、ヘッダー、フッター、画像オーバーレイ、画像キャップを示しています。 これらはすべて、元のテキストに視覚的に説明されています .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レイアウトを作成するための強力なツールです。 この記事では、基本的な使用法、カスタマイズ、高度なレイアウト、パフォーマンスの最適化をカバーする包括的なガイドを提供します。 元のテキストのスクリーンショットとコードの例は、ここで説明する概念を理解するために不可欠です。

以上がブートストラップカードコンポーネント：完全な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css bootstrap html for include using class JS dom this border background column
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSを使用してプリンターに優しいページを作成する方法次の記事：CSSを使用してプリンターに優しいページを作成する方法

関連記事

続きを見る