Bootstrap Webページレイアウトグリッドの実装

1. Bootstrapグリッドシステムの仕組み

1.1 12グリッドシステム

Grid は英語でグリッドです。ある場所が grids で、ある場所が grids である理由は、単に翻訳の習慣が異なるためです。 12 グリッドシステムとは、画面全体を幅で 12 等分し、1 つの部分は画面幅の 12 分の 1 を表します。なぜ 10 や他の等分ではなく 12 等分するのでしょうか。これは、12 が 1、2、3、4、6 の最小公倍数であるためです。経験上、このような分割が最も美しく実用的です。もちろん、36 グリッドや 10 グリッドのシステムも見たことがあります。使用の観点から見ると、確かに 12 グリッドのシステムほど便利ではありません。

12 グリッドシステムでは、画面を左側と右側に分割し、左側が 1/3、右側が 2/3 を占めるようにする場合、左の幅を 4 グリッド、右の幅を 8 グリッドに設定できます。左右の各ステーションの半分が必要な場合は、それぞれを 6 グリッドに設定するだけで済みます。ページを画面全体に表示する必要がある場合は、直接 12 グリッドに設定できます。ほら、便利じゃないですか？

1.2 Bootstrap グリッドシステムタグ

Bootstrap グリッドシステムは、コンテナー、行、列の 3 つのタグを設計します。

コンテナは、前のセクションで詳しく説明したコンテナです。
行は列を意味し、水平方向の列を表す。
col はセルであり、特定の各セルを表します。これを記述する方法は 3 つあります: col、col-グリッド番号 (col-3 など)、col-画面サイズ-グリッド番号 (col-md-3 など)。

以下は、画面を 3 つの等幅の単位に分割するサンプルコードです。まだ具体的なコードを詳しく調べる必要はありません。グリッドシステムの構造を簡単に理解するだけで十分です。グリッドシステムの構造については、後で詳しく説明します。

<div class="コンテナ">
    <div class="row">
        <div class="col">
            最初のユニット</div>
        <div class="col">
            2番目のユニット</div>
        <div class="col">
            3番目のユニット</div>
    </div>
</div>

1.3 Bootstrap グリッドシステムのルール

行を使用して、列の水平グループを作成します。
ページ内に複数の行が存在する場合があります。
適切な配置とパディングを実現するには、行をコンテナー内に配置する必要があります。
コンテンツは列 (col) 内に配置する必要があり、行の直接の子となることができるのは列のみです。
行は列内にネストすることができ、列自体がコンテナであるため、列内の行にはコンテナは必要ありません。
col-screen-size-grid-number などの定義済みのグリッドクラスを直接使用して、グリッドレイアウトをすばやく作成できます。
定義済みクラスには 5 つの画面サイズ値があり、主にレスポンシブデザインに使用されます (3.1 を参照)。グリッド番号は画面の幅を表す 1 から 12 までの数字です。

2. Bootstrapグリッドシステムにおけるセル幅の設定

2.1 デフォルトの等幅レイアウト

各列の幅を設定しない場合、列の数に関係なく各列のデフォルトの幅が均等に分散されますが、12 列を超える列が連続している場合は、予期しない動作が発生します (調査目的でいくつかのテストを行いましたが、これをテストする必要はありません。12 列を超えるレイアウトを行う場合は、テーブルを使用できます)。以下に、後で使用するコードの一部を示します。若干の変更を加え、繰り返さずにそのまま使用します。

col または col-grid 番号を使用して幅を設定する場合、効果をプレビューするにはウィンドウ幅を最大に設定してください。そうしないと、効果の偏差が発生する可能性があります。また、実際のアプリケーションではこの設定は推奨されません。レスポンシブにしたくない場合でも、レスポンシブグリッドレイアウトを使用してください。

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部nofollow" rel="スタイルシート">
 
    <title>グリッド システムのデモンストレーション</title>
  </head>
  <本文>
  
    <div class="コンテナ">
        <div class="row">
            <div class="col">
                <h1>Bootstrap とは何ですか? </h1>
                <p>
                    フロントエンドページを開発するときに、すべてのボタン、スタイル、ブラウザ互換性コードを最初から記述しなければならないとしたら、時間の無駄になってしまいます。したがって、ページの基本部分を実装し、面倒な詳細を解決するのに役立つフレームワークが必要であり、それに基づいてカスタマイズできます。 Bootstrap は、簡潔で直感的、かつ強力なフロントエンド開発フレームワークです。その標準を学習して遵守する限り、Web デザインを学んだことのない開発者でも、非常にプロフェッショナルで美しいページを作成でき、作業効率が大幅に向上します。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap とは何ですか? </h1>
                <p>
                    フロントエンドページを開発するときに、すべてのボタン、スタイル、ブラウザ互換性コードを最初から記述しなければならないとしたら、時間の無駄になってしまいます。したがって、ページの基本部分を実装し、面倒な詳細を解決するのに役立つフレームワークが必要であり、それに基づいてカスタマイズできます。 Bootstrap は、簡潔で直感的、かつ強力なフロントエンド開発フレームワークです。その標準を学習して遵守する限り、Web デザインを学んだことのない開発者でも、非常にプロフェッショナルで美しいページを作成でき、作業効率が大幅に向上します。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap とは何ですか? </h1>
                <p>
                    フロントエンドページを開発するときに、すべてのボタン、スタイル、ブラウザ互換性コードを最初から記述しなければならないとしたら、時間の無駄になってしまいます。したがって、ページの基本部分を実装し、面倒な詳細を解決するのに役立つフレームワークが必要であり、それに基づいてカスタマイズできます。 Bootstrap は、簡潔で直感的、かつ強力なフロントエンド開発フレームワークです。その標準を学習して遵守する限り、Web デザインを学んだことのない開発者でも、非常にプロフェッショナルで美しいページを作成でき、作業効率が大幅に向上します。
                </p>
            </div>
            <div class="col">
                <h1>Bootstrap とは何ですか? </h1>
                <p>
                    フロントエンドページを開発するときに、すべてのボタン、スタイル、ブラウザ互換性コードを最初から記述しなければならないとしたら、時間の無駄になってしまいます。したがって、ページの基本部分を実装し、面倒な詳細を解決するのに役立つフレームワークが必要であり、それに基づいてカスタマイズできます。 Bootstrap は、簡潔で直感的、かつ強力なフロントエンド開発フレームワークです。その標準を学習して遵守する限り、Web デザインを学んだことのない開発者でも、非常にプロフェッショナルで美しいページを作成でき、作業効率が大幅に向上します。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </本文>
</html>

このコードの効果は上の図に示されています。次のセル部分をさらに数回コピーして、効果を確認することができます。

2.2 各列の幅を設定する

3 つの<div class="col">の col を、col-3、col-6、col-3 などの値に変更してみてください。ただし、3 つの数字の合計は 12 になります。もちろん、行の合計が 12 である限り、1 つまたは複数のセルを削除または追加することもできます。このような簡単な設定により、セルの幅を非常に便利に変更できます。次の図は、col がそれぞれ col-2、col-2、col-4、col-4 に設定されている場合の表示効果を示しています。

2.3 可変幅の列

セル値を設定する場合、セルが 3 つあり、そのうち 1 つだけを設定すると、残りの 2 つのセルが残りのスペースを均等に分割するため、可変幅の列を簡単に設定できます。念のため、固定値を持つセルは前面に配置する必要はありません。たとえば、コード 2.1 では、2 番目のセルを画面の半分 (列 6) を占めるように設定し、他のセルを均等に分散させることができます。

2.4 列の自動折り返し

各セルの幅の値を設定すると、行の残りのスペースにセルが収まらなくなると、行は自動的に折り返されます。

例 2.1 では、4 つの<div class="col">のそれぞれの col を col-6 に変更して、効果を確認します。

例 2.1 では、4 つの<div class="col">のそれぞれの col を col-12 に変更して、効果を確認します。

例 2.1 では、4 つの<div class="col">のそれぞれの col を col-8 に変更して、効果を確認します。

col-8 に設定するとセルごとに 1 行になることもありますが、テキストは画面の 8/12、つまり 3 分の 2 しか占めないので、特別な要件がない場合は、各行のセル値の合計がちょうど 12 になるようにしてください。

3. Bootstrapグリッドレスポンシブレイアウト

3.1 レスポンシブレイアウトとは何ですか?

レスポンシブレイアウトとは、簡単に言うと画面サイズが異なると表示されるページレイアウトが異なるということです。たとえば、携帯電話で表示すると 1 行にセルが 1 つだけ表示されますが、タブレットで表示すると 2 行にセルが 2 つ表示され、コンピューターで表示すると 3 行にセルが表示されます。 Bootstrap ではこの機能を簡単に実現できます。

3.2 Bootstrapグリッドシステムの画面サイズ分割

下の表を見てください。見覚えがありますか? 余分な xs があることを除けば、ブレークポイントのルールとまったく同じです。実際、デフォルトは xs なので、直接省略できます。ご覧のとおり、Bootstrap は 5 つのブレークポイントを通じて画面を 6 つのサイズに分割します。

	xs <576ピクセル	小さい ≥576ピクセル	メリーランド州 ≥768ピクセル	lg ≥992ピクセル	x ≥1200ピクセル	2XLサイズ ≥1400ピクセル
容器	なし（自動）	540ピクセル	720ピクセル	960ピクセル	1140ピクセル	1320ピクセル
画面サイズクラスのプレフィックス	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

3.3 Bootstrapグリッドレスポンシブレイアウトの例

2.1 の例では、4 つの<div class="col">を<div class="col-12 col-md-6 col-lg-4">に置き換え、ブラウザウィンドウのサイズを変更して効果を確認します。このコードは、幅が <768px の場合は 1 行に 1 列のみ (各列の幅は 12 グリッド)、幅が 768px < 992px < の場合は 2 列 (各列の幅は 6 グリッド)、幅が 992px より大きい場合は各行に 3 列 (各列の幅は 4 グリッド) になることを意味します。ビデオデモはこちら

もちろん、 <div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">のように、より詳細にすることもできます。

ここでちょっとしたコツをお教えします。1 行に複数の列を表示したい場合、幅は 12 を特定の数で割るだけです。ハハ、お分かりですね。

3.4 回答したくない場合は

すべてのブラウザで同じ表示効果を実現し、2 列に分割したい場合、つまりレスポンシブにしたくない場合は、非常に簡単です。すべての画面で同じ数のグリッドを設定するだけです<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6"> 、どの画面でも一貫性を保つことができます。

Bootstrap ウェブページレイアウトグリッドの実装に関するこの記事はこれで終わりです。より関連性の高い Bootstrap グリッドレイアウトコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: