ブートストラップ グリッド システムを使用する場合

ブートストラップを使用して Web ページを作成し、Web ページをさまざまな解像度のデバイスに適応させたい場合は、グリッド システムを使用する必要があります。 。 (推奨される学習: Bootstrap ビデオ チュートリアル )

グリッド システム は、水平に配置して次の順序で配置できるブロック レベルの要素のグループです。 screen 異なる解像度のブロックレベル要素のスタイルを変更します。

グリッド システムは、一連の行と列を通じてページ レイアウトを作成するために使用され、作成されたこれらのレイアウトにコンテンツを配置できます。

以下は、Bootstrap グリッド システムがどのように機能するかの概要です。

「行」は、 .container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります。適切な配置とパディングを与えるために。

「行」を経由して横方向に「列」の集合を作成します。

コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になることができます。

.row と同様 .col-xs-4 などの事前定義クラスグリッド レイアウトをすばやく作成するために使用できます。ブートストラップ ソース コードで定義されたミックスインは、セマンティック レイアウトの作成にも使用できます。

「列 (列)」により、ギャップ (ガター) を作成するためのパディング属性を設定します列間の.row 要素に負のマージンを設定して、.container 要素に設定されたパディングをオフセットすることで、間接的に「行」になります。含まれる「列」がパディングをオフセットします。

負のマージンは、次の例が目立っています。ラスター列の内容が並んでいます。

ラスター システムの列は、1 ～ 12 の値を指定することによって、その範囲で表されます。たとえば、3 つの等しい幅の列は、 .col-xs-4.

「行」に含まれる「列」が 12 より大きい場合、余分な「列」の要素はまとめて別の行に配置されます.

Grid グリッド クラスは、ブレークポイント サイズ以上の画面幅を持つデバイスに適用され、小さな画面デバイスの場合はグリッド クラスがオーバーライドされます。したがって、要素に .col-md-* グリッド クラスを適用すると、これは、ブレークポイント サイズのデバイス以上の画面幅を持つデバイスに適用され、小さな画面デバイスのグリッド クラスをオーバーライドします。したがって、要素に .col-lg-* を適用すると存在せず、大画面デバイスにも影響します。

その他のブートストラップ関連の技術記事については、Bootstrap チュートリアル 列にアクセスして学習してください!

以上がブートストラップ グリッド システムを使用する場合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。