Bootstrap 4グリッドシステムは、レスポンシブレイアウトに使用されます。
レスポンシブレイアウトは、さまざまな解像度で要素がページ内で整列する方法を表します。他のBootstrap4コンポーネントについて学習する前に、グリッドの使用方法を理解することが重要です。使用する要素が何であれ、画面上のどこかに配置する必要があるためです。
始めましょう！
目次
- ブートストラップ4コンテナ
- 4行のブートストラップ
- ブートストラップ4列
- 参考文献
Bootstrap 4グリッドは、コンテナー、行、および列で構成されます。それらを一つずつ取り上げて説明します。
ブートストラップ4コンテナ
Bootstrap 4コンテナは、クラスがの要素.containerです。コンテナはBootstrap4グリッドシステムのルートであり、レイアウトの幅を制御するために使用されます。
Bootstrap 4コンテナには、ページ内のすべての要素が含まれています。これは、ページが次の構造を持つ必要があることを意味します。最初にHTMLページの本文、その中にコンテナとコンテナ内の他のすべての要素を追加する必要があります。
... simple.containerクラスは、画面の幅に応じてレイアウトの幅を設定します。コンテンツをページの中央に配置し、水平方向に配置します。Bootstrap4コンテナとページの左端と右端の間には同じスペースがあります。
.containerスケール画面の幅が狭くとして幅がダウンし、モバイルで全幅となります。コンテナの幅は、すべての画面サイズに対してBootstrap4ライブラリ内で定義されます。正確なサイズはこちらで確認できます。
全幅コンテナは、画面幅に関係なく、画面サイズの100％を使用します。これを使用するには、クラスを追加する必要があります。container-fluid。
Hello! I am in a simple container. Hello! I am in a full-width container. ここでCodePenを表示できます。
2種類のコンテナの違いを確認するには、コンソールでペンを開いて画面サイズを切り替えることができます。
4行のブートストラップ
ブートストラップ4行は、画面の水平スライスです。これらは、列のラッパーとしてのみ使用されます。それらを使用するには、.rowクラスが必要です。
... Bootstrap4行について覚えておく必要がある最も重要なことは次のとおりです。
- これらは、列を含めるためにのみ使用されます。列とともに行内に他の要素を配置すると、期待した結果が得られません。
- それらは容器に入れられなければなりません。これを行わないと、ページが水平方向にスクロールします。これは、行の左右の余白が15であるために発生します。コンテナーには、15pxのパディングがあるため、余白が打ち消されます。
- 列は行の子である必要があります。そうしないと、整列しません。行と列は、この厳密な階層で連携するように作成されます。
ブートストラップ4列
これで、このチュートリアルのすばらしい部分であるBootstrap4列にたどり着くことができます。コラムは素晴らしいです！画面を水平方向に分割するのに役立ちます。
行に1つの列を配置すると、すべての幅が使用されます。2つの列を追加すると、それぞれ幅の1/2になります。そして、それは任意の数の列に当てはまります。
... ... ... ... ... ... ... ... CodePenでコードをライブで見ることができます。
補足：列は色付けされていません。より視覚的に説得力のある説明のために色を追加しただけなので、きれいに見えます。
列のサイズの設定
.colクラスを使用すると、列の幅が動的に設定されます。つまり、行の列数に応じて、列の幅はコンテナの幅を列数で割った値になります。
ただし、列を定義する別の方法があります。列にクラスを使用して、そのサイズを定義できます。
デフォルトでは、Bootstrap4グリッドは12列で構成されています。列には1から12までの任意のサイズを選択できます。3つの等しい列が必要な場合は.col-4、それぞれに使用できます（3 * 4列それぞれ= 12であるため）。または、それらに異なるサイズを設定できます。ここではいくつかの例を示します。
... ... ... ... ... ... ... ... CodePenでコードをライブで見ることができます。
行の列の合計が12に達しない場合、それらは行全体を埋めません。列の合計が12を超えると、次の行に移動します。最初の行には、合計が12以下になる最初の要素のみが表示されます。
列のブレークポイントの設定
上記の例をモバイルで表示したい場合、いくつかの問題が発生する可能性があります。モバイルで5列を表示すると、コンテンツが読めなくなります。
ここで、最も強力なBootstrap4コンポーネントの1つが役立ちます。異なる画面で異なるレイアウトを使用するために、メディアクエリを作成する必要はありません。代わりに、列ブレークポイントを使用できます。
ブレークポイントは、画面解像度を表すBootstrap4変数です。クラスにブレークポイントを指定する場合、ブレークポイントが保持する数と少なくとも同じ大きさの解像度に対してのみアクティブになるようにクラスに指示します。
私たちが学ぶ最も簡単なクラスは.col-[breakpoint]クラスです。このクラスを使用する場合、少なくとも定義されたブレークポイントの解像度を持つデバイスに表示される場合にのみ、列の動作を定義します。指定されたブレークポイントまで、列はデフォルトで垂直方向に整列します。そして、ブレークポイントの後、クラスのために水平方向に整列します。
ブートストラップには、使用できる4つのブレークポイントがあります。
.col-sm大型の携帯電話（解像度が576px以上のデバイス）の場合。.col-mdタブレット用（≥768px）;.col-lgラップトップ用（992px以上）;.col-xlデスクトップ用（≥1200px）
小さな画面では2つの列を垂直に、大きな画面では同じ行に次々に表示するとします。列が同じ行に配置されるブレークポイントを指定する必要があります。
この例では、.col-lgブレークポイントを使用して、さまざまな画面で列がどのように表示されるかを確認します。指定されたブレークポイント（<992px）よりも低い解像度の場合、列は垂直に表示されます。これは、モバイルデバイスとタブレットでは、列が次のようになることを意味します。
また、ブレークポイント以上（992px以上）の解像度を持つデバイスの場合、列は同じ行に配置されます。これは、ラップトップとデスクトップで次の結果が得られることを意味します。
... ... CodePenでコードをライブで見ることができます。別のウィンドウでCodepenを開き、さまざまな解像度でページを表示すると、列の位置が変わるのがわかります。
大型の携帯電話から始めて2つの列を同じ行に配置したい場合.col-smは、タブレット.col-mdや特大画面に使用します.col-xl。
列のサイズとブレークポイントの設定
サイズとブレークポイントを組み合わせて、形式が単一のクラスを使用できます.col-[breakpoint]-[size]。
たとえば、ラップトップの解像度から始まる行に異なるサイズの3つの列を配置する場合は、次のようにする必要があります。
... ... ... この結果は、992px未満の解像度で得られます。
また、992px以上の画面の場合：
繰り返しになりますが、CodePenでコードをライブで見ることができます。
しかし、小さなモバイル解像度では行ごとに1列、タブレットでは行ごとに2列、ラップトップまたは高解像度のデバイスでは4列を表示したい場合はどうでしょうか。
次に、1つの列に複数のクラスを追加して、すべての解像度の動作を記述します。複数のクラスを使用して、コンテンツがタブレットで6スロット、ラップトップで3スロットを取るように指定します。
... ... ... ... 結果はタブレットで次のように表示されます。
そして、ラップトップとより高い解像度でこのように：
この例はCodePenでも公開されています。
演習として、画面サイズに応じて列数が異なる行を作成し、ブラウザコンソールで動作を確認することができます。
列のオフセット
列を隣り合わせにしたくない場合は、クラス.offset-[breakpoint]-[size]をと一緒に使用できます.col-[breakpoint]-[size]。
このクラスを使用することは、列の前に空の列を追加することと同じです。簡単な例を次に示します。
... ... CodePenでコードをライブで見ることができます。
このクラスは、行の任意の列で使用できます。さらにいくつかの例を示します。
... ... ... ... ... ネスト列
これは意外かもしれませんが、列の中に行を追加することができます！
問題の行（親列の幅を持つ）は、.col-* クラスを通じて参照できる12個の（小さい）列に分割されます。
列内に新しい行を挿入するとどうなるかを見てみましょう。
... ... ... ... CodePenでコードをライブで見ることができます。
これを知っていると、情報を整理するために多くのレベルに進むことができます。列は、スペースを管理するための簡単な方法を提供します。
これで、Bootstrap4レスポンシブグリッドシステムに関する基本的な知識は終わりです。ご不明な点がございましたら、コメント欄でお知らせください。喜んでお答えいたします。
参考文献
もっと時間があれば、ここにいくつかの有用なリソースがあります：
- GetBootstrapの公式グリッドドキュメント
- Scrimbaからのビデオチュートリアル
この記事は当初、BootstrapBayブログに投稿されました。これは、14 Days of Bootstrap4と呼ばれる一連のBootstrap4チュートリアルの一部です。Bootstrap4コンポーネントについて引き続き学習したい場合は、これらの記事から始めることをお勧めします。
また、Bootstrapテンプレートを使用して開発をすぐに開始したい場合は、マーケットプレイスを確認してください。
しかし、深く掘り下げる前に、新しく習得したスキルを祝うために少し時間を取ってください！？
