ブートストラップ削除システムとは何ですか?

bootstrap グリッド削除システムは、Bootstrap に組み込まれた応答性の高い、モバイル デバイスファーストの流動的なグリッド システムを指します。画面デバイスまたはビューポートのサイズが増加すると、システムは自動的に最大 12 列に分割されます。;実装原則として、コンテナのサイズを定義し、それを 12 等分し、次に内側と外側のマージンを調整し、最後にメディア クエリを組み合わせてグリッド システムを実装します。

推奨: 「bootstrap 基本チュートリアル 」

Bootstrap グリッド システム (レイアウト)

##1. グリッド システム (レイアウト)
Bootstrap には、画面デバイスまたはビューポート (ビューポート) のサイズが大きくなるにつれて変化する、応答性の高い、モバイル デバイス優先の流体グリッド システムが組み込まれています。を選択すると、システムが自動的に最大 12 列に分割します。

ここでは、Bootstrap のグリッド システムをレイアウトと呼びます。行と列の一連の組み合わせによってページ レイアウトが作成され、作成したレイアウトにコンテンツを配置できます。ここでは、Bootstrap グリッド システムの動作原理を簡単に紹介します。

グリッド システムの実装原理は非常に単純で、コンテナ サイズを定義し、それを 12 等分するだけです (コンテナ サイズを 12 等分することもできます)。 24 または 32 の部分に分割されますが、12 が最も一般的です)、次に内側と外側のマージンを調整し、最後にメディア クエリと組み合わせて強力な応答性の高いグリッド システムを作成します。 Bootstrap フレームワークのグリッド システムは、コンテナを 12 等分に分割します。

これを使用する場合、実際の状況に応じて LESS (または Sass) ソース コードを再コンパイルして、12 の値を変更します (つまり、24 または 32 に変更します。もちろん、除算することもできます)さらに詳しく説明しますが、この方法で使用することはお勧めできません)。

2. 使用規則Bootstrap には、応答性の高いモバイル デバイスのセットが組み込まれています。

1. データ行 (.row) に適切な配置とパディングを与えるには、データ行 (.row) がコンテナー (.container) に含まれている必要があります。例:

2. 行 (.row) に列 (.column) を追加できますが、列数の合計が二等分の合計数を超えることはできません。列（12 など）。例:

3. 特定のコンテンツは列コンテナー (列) 内に配置する必要があり、その列 (列) のみがその直接の子として使用できます。行コンテナー (.row) 要素

4. パディングを設定して列間にスペースを作成します。次に、最初と最後の列に負のマージンを設定して、パディングの効果を相殺します。

ブートストラップ フレームワークのグリッド システムがどのように機能するかをよりよく理解するために、スケッチを見てみましょう:

図の簡単な説明:

1. 大きな白い領域を持つ最も外側の境界線は、ブラウザーの表示領域に相当します。 Bootstrap フレームワークのグリッド システムにはレスポンシブ効果があり、4 種類のブラウザ（極小画面、小画面、中画面、大画面）が付属しており、そのブレークポイント（ピクセル分割点）は 768px、992px、1220px です。

2. 2 番目の境界線 (1) はコンテナー (.container) に相当します。ブラウザの解像度が異なると、幅も異なります: 自動、750px、970px、1170px。 bootstrap.css の 736 ～ 756 行目に設定:

3. 2 番の横棒はコンテナの行 (.row) が均等に分割されていることを説明しています。等しい部分、つまり列です。各列には「padding-left:15px」（図のピンクの部分）と「padding-right:15px」（図の紫の部分）があります。これにより、最初の列のパディング左と最後の列のパディング右が合計幅の 30 ピクセルを占めることになり、ページが見苦しくなります。もちろん、一定の間隔を空ける必要がある場合には、これは良い方法です。 bootstrap.css の 767 ～ 772 行目に示されているように:

4. 3 番の水平バーは行コンテナー (.row) で、「margin- 「left」と「margin-right」の値は「-15px」で、最初の列の左パディングと最後の列の右パディングをオフセットするために使用されます。 bootstrap.css の 763 ～ 767 行目:

5. 行と列を組み合わせて、水平バー 4 の効果を確認します。これは私たちが期待していることです。最初の列と最後の列とコンテナー (.container) の間にスペースはありません。

水平 5 は、ニーズに応じて列を任意に組み合わせることができるが、その組み合わせの合計が列の総数を超えてはいけないことを示したいだけです。

3. グリッド オプション
次のスクリーンショットは、Bootstrap のグリッド システムがさまざまなモバイル デバイスでどのように動作するかを明確に示しています。

上のスクリーンショットからわかるように、Bootstrap はさまざまな画面サイズ (携帯電話、タブレット、PC などを含む) に応じてさまざまなスタイル クラスを設定しているため、開発者は開発時により多くの選択肢を得ることができます。私の理解によれば、上記の複数の異なるスタイルクラスが要素で使用されている場合、要素はさまざまなサイズに応じて最も適切な（最も一致する）スタイルクラスを選択します。説明するための簡単な例: たとえば、要素に対して 2 つのスタイル クラス、.col-md- と .col-lg を使用します。上のスクリーンショットと比較すると、

最初の状況: Size>>=1200px; の場合、.col-lg が選択されることがわかります。

2 番目のケース: Size》=992px および size》=1200px; の場合、.col-md が選択されます。

3 番目のケース: サイズが

4. 基本的な使い方
グリッド システムはレイアウトに使用され、実際には列の組み合わせです。 Bootstrap フレームワークには、グリッド システムの基本的な使用法が 4 つあります。 Bootstrap フレームワークでは画面サイズごとに異なるグリッド スタイルが使用されるため、このセクションの例では中画面 (970px) を例として説明しますが、他の画面の使用方法も同様です。

1)、列の組み合わせ

列の組み合わせを簡単に理解すると、数値を変更して列を結合することになります (原則: 列の合計数は 12 を超えることはできません)。これは、テーブル属性の列スパンに似ています。例:

#上記の構造を使用すると、次の図の効果がわかります。

5. 列のオフセット隣接する 2 つの列を近づけたくない場合がありますが、マージンやマージンを使用したくない場合があります。その他の技術的手段。このとき、列オフセット (オフセット) 関数を使用してこれを実現できます。列オフセットの使用も非常に簡単で、クラス名「col-md-offset-*」を列要素 (アスタリスクはオフセットする列の組み合わせの数を表します) に追加し、このクラスの列を追加するだけです。名前は「Offset right」になります。たとえば、列要素に「col-md-offset-4」を追加すると、列が 4 列幅分右に移動することになります。

上記のサンプル コードと同様、効果は次のとおりです。

実装原理は非常にシンプルです。 、12 ポイントを使用 1 (1/12) マージン左。そして、オフセットの数と同じ数のマージン左が存在します。 bootstrap.css の 1205 行目から 1241 行目に示すように:

注:

ただし、注意すべき点が 1 つあります。「col-md」を使用してください。 - offset-*" 列を右にシフトする場合は、列とオフセット列の合計数が 12 を超えないようにしてください。そうでない場合、列は次のように壊れた行で表示されます。 p class="row"> ;

.col-md-3

col-md-offset-3

col-md-4

上記のコードの列とオフセット列の合計数は 3 3 3 4 = 13>12 であるため、列の区切りが発生します。

上記のサンプル コードと同様に、効果は次のとおりです。

6. 列の並べ替え

列の並べ替えは実​​際に変更されます。方向は左右のフローティングを変更し、フローティング距離を設定します。ブートストラップ フレームワークのグリッド システムでは、これはクラス名「col-md-push-*」と「col-md-pull-*」を追加することによって行われます (アスタリスクは移動する列の組み合わせの数を表します)。 簡単な例を見てみましょう:

デフォルトでは、上記のコードには次のような効果があります:

「col-md-4」は左側、「col-md-8」は右側です。位置を入れ替えたい場合は、「col-md-4」を移動する必要があります。 md-4" 右に 8 桁。列間の距離は 8 オフセットです。つまり、クラス名 "col-md-push-8" を "

に追加します。 」とそのスタイルを呼んでいます。

また、「col-md-8」を 4 列、つまり 4 オフセット分左に移動し、「

「クラス名」」に追加します。 Col-md-pull-4":

7. 列のネスト
Bootstrap フレームワークのグリッド システムは、列のネストもサポートしています。 1 つ以上の行コンテナを列に追加し、その行コンテナに列を挿入できます (前述の列を使用)。ただし、列コンテナ内の行コンテナ(行)では、幅が100%の場合、現在の外側の列の幅になります。簡単な例を見てみましょう:

結果は次のとおりです:

注: ネストされたものの総数列は 12 を超える別の列の後に続く必要もあります。それ以外の場合は、最後の列が新しい行に表示されます。

以上がブートストラップ削除システムとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。