ブートストラップで価格設定テーブルを作成する方法

ブートストラップ価格表を作成するには、最初にBootstrap 5.1のCSSおよびJSファイルを導入し、次にグリッドシステムとカードコンポーネントを使用してレスポンシブレイアウトを構築する必要があります。各価格設定計画には、1列のカードが表示されます。 1.コンテナとrow-cols-1 row-cols-md-3を使用して、上記のモバイルスタッキングと中画面の3つの列を実現します。 2。各プランにカードコンポーネントを使用して、H-100を通じて輪郭の高さを維持し、通常の計画と推奨計画を区別します。 3.テキストセンターを使用してコンテンツを中央に配置し、バッジラベル「人気」、BTNの選択ボタンを設定します。 4.リストアンスタイルを使用してデフォルトのスタイルをクリアし、Bi-checkとbi-xを使用して、機能がBootstrapアイコンと組み合わせて含まれているかどうかを識別します。 5. MY-4およびG-4等しい間隔クラスを使用して、空白スペースを最適化して明確な視覚を確保します。最終的に、多数のカスタムCSSを必要とせずに、美しく応答性の高い価格設定テーブルが達成されます。

Bootstrapで価格表を作成するのは簡単で、Bootstrapのグリッドシステム、カード、ユーティリティクラスを使用して実行できます。ブートストラップ5を使用して、クリーンで応答性の高い価格表を構築する方法は次のとおりです。

1.ブートストラップをセットアップします

まず、ブートストラップがプロジェクトに含まれていることを確認してください。 HTMLファイルのでCDNを使用できます。

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "styleSheet">

必要に応じてボディの端にJavaScriptバンドルを含めます（基本的なスタイリングには必要ありません）：

 <Script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/boottrap.bundle.min.js"> </scrip>

2。価格張りにブートストラップカードを使用します

価格表を作成する最も一般的な方法は、Bootstrapのカードコンポーネントを使用することです。各価格設定計画（基本、プロ、プレミアムなど）は、グリッドシステムを使用して連続して配置されたカードです。

これが完全な例です：

 <div class = "container my-5">
  <h2 class = "text-center mb-4">価格設定</h2>
  <div class = "row row-cols-1 row-cols-md-3 g-4">

    <！ - 基本計画 - >
    <div class = "col">
      <div class = "カードH-100境界線">
        <div class = "card-body text-center">
          <h5 class = "card-title"> basic </h5>
          <h2 class = "card-price display-6 fw-bold"> $ 9 <span class = "text muted fw-normal fs-5">/mo </span> </h2>
          <ul class = "list-unstyled my-4">
            <li> 5人のユーザー</li>
            <li> 10 GBストレージ</li>
            <li>電子メールサポート</li>
            <li> APIアクセスなし</li>
          </ul>
          <button class = "btn btn-outline-primary"> [プラン] </button>を選択します
        </div>
      </div>
    </div>

    <！ - プロプラン（推奨） - >
    <div class = "col">
      <div class = "カードH-100ボーダープリマリーシャドウ-SM">
        <div class = "card-body text-center">
          <h5 class = "card-title text-primary"> pro <span class = "バッジBG-primary">人気</span> </h5>
          <h2 class = "card-price display-6 fw-bold"> $ 19 <span class = "text muted fw-normal fs-5">/mo </span> </h2>
          <ul class = "list-unstyled my-4">
            <li> 20人のユーザー</li>
            <li> 50 GBストレージ</li>
            <li>優先電子メールサポート</li>
            <li> APIアクセス</li>
          </ul>
          <button class = "btn btn-primary"> get arted </button>
        </div>
      </div>
    </div>

    <！ - プレミアムプラン - >
    <div class = "col">
      <div class = "カードH-100境界線">
        <div class = "card-body text-center">
          <h5 class = "card-title">プレミアム</h5>
          <h2 class = "card-price display-6 fw-bold"> $ 49 <span class = "text-muted fw-normal fs-5">/mo </span> </h2>
          <ul class = "list-unstyled my-4">
            <li>無制限のユーザー</li>
            <li> 500 GBストレージ</li>
            <li> 24/7の電話サポート</li>
            <li> Advanced API＆Analytics </li>
          </ul>
          <button class = "btn btn-outline-primary"> [プラン] </button>を選択します
        </div>
      </div>
    </div>

  </div>
</div>

3.キーデザインのヒント

• カードでh-100使用して、すべてのカードを同じ高さにします。
• 色付きの境界線、影、バッジで推奨される計画を強調します。
• text-centerを使用して、きれいな外観のためにコンテンツを一元的に整列させます。
• * `row-cols-` classes **を使用して応答性を制御します（モバイルに1列、中画面などで3列）。
• my-4 、 mb-4 、 g-4 （GAP）などのユーティリティクラスで間隔をカスタマイズします。
• プラン名やトライアルオファーなどの追加情報については、カードにヘッダーまたはフッターを追加することを検討してください。

4.オプション：チェックマークで価格機能を追加します

含まれる機能には、アイコン（ブートストラップアイコンなど）を使用して、読みやすさを向上させることができます。

 <link rel = "styleSheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

次に、リストで：

 <li> <i class = "bi bi-check text-success"> </i> apiアクセス</li>
<li> <i class = "bi bi-x text-danger"> </i>分析なし</li>

このアプローチにより、最小限のカスタムCSSを備えた完全に応答性の高いプロフェッショナルな価格設定テーブルが提供されます。ブートストラップはレイアウトと応答性を処理するため、コンテンツとブランディングに集中できます。

基本的に、カード、グリッド、いくつかのユーティリティクラスを組み合わせるだけで、あなたは行きます。

以上がブートストラップで価格設定テーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。