Bootstrap 3.0 学習ノート グリッドシステム事例

序文

前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました。

この記事の主な内容は以下の部分に分かれています

1. グリッドオプション

2. 積み重ねから横置きへ

3. モバイルデバイスとデスクトップ

4. レスポンシブな列リセット

5. 列オフセット

6. ネストされた列

7. 列の並べ替え

8. まとめ

ラスターオプション

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

上記のスクリーンショットからわかるように、Bootstrap はさまざまなサイズの画面 (携帯電話、タブレット、PC など) に異なるスタイル クラスを設定し、開発者に開発時の選択肢を広げます。私の理解によれば、要素に上記の複数の異なるスタイル クラスを使用すると、要素はさまざまなサイズに基づいて最も適切な (最も理想的なマッチング) スタイル クラスを選択します。簡単な例で説明しましょう。たとえば、要素に .col-md- と .col-lg という 2 つのスタイル クラスを使用します。上記のスクリーンショットを参照してください。

最初のケースでは、size>=1200px; となり、.col-lg が選択されます。

2 番目のケース: size>=992px かつ size<=1200px の場合、.col-md が選択されます。

3 番目のケースでは、サイズが 992 ピクセル未満の場合、これら 2 つのスタイル クラスのどちらも要素に対して機能しません。

積み重ねから横置きへ

グリッド オプションの 4 つのスタイル クラスはすべて、通常 .container で使用される .row クラスに基づいて使用されます。

重要なのは、適切なコンテナで適切なスタイル クラスを使用することです。

.col-md-* グリッド クラスの 1 セットを使用すると、携帯電話やタブレット (極小から小画面の範囲) 上でスタックされて開始され、デスクトップ (中) 画面のデバイス上で水平に移動する基本的なグリッド システムを作成できます。任意の .row 内に列 (col-*-*) を配置するだけです。

ブラウザの幅を制御して、積み重ねや水平配置の効果を確認できます。

これは明らかにスタッキング効果、つまりブラウザの幅が小さいサイズに調整されたときです。

今は横並びになっています。ブラウザの幅を少し広めに調整した後。他の 3 つのクラスを使用して効果をテストすることもできます。

モバイルとデスクトップ

上記の例から、.col-md-* を小さな画面で使用すると、積み重ねて表示されることがわかります。そのため、開発者は、小さな画面でページを水平に配置する必要がある場合があります。その場合、.col-xs-* (768 ピクセル未満の画面用のスタイル クラス) が役立ちます。

コードから、.row スタイル クラスの最初の 2 つの div に対して、各要素に 2 つのスタイル クラスが設定されていることがわかります。

少し大きめの画面サイズで表示した時の効果です。各要素の2つのスタイルは、サイズによって適切に選択されます。少し大きめの画面サイズの場合、選択されるスタイルクラスは .col-md-* になります。

それで：

1 行目: 8 対 4 の比率。

2 行目: 3 つの 4 を 3 つの均等な部分に分割します。

3段目：6と6は大きいサイズですが、スタイルが1つしかないため、これも2等分されています。

ここで、ページ画面が一定サイズより小さい場合は、各要素のスタイル クラスを再選択します。これで、最初の 2 つの .row オプションは両方とも col-xs-* になりました。

それで：

最初の行: 2 つの要素は 12 と 6 に分割され、1 行は 12 の部分であるため、2 番目の要素は折り返されて 6 つの部分の半分を占めます。

2段目:6個を3個。そして、1 行は 12 個のコピーです。したがって、3 番目の要素はラップされ、6 つの共通位置を占めます。

レスポンシブな列のリセット

上記の 2 つのケースを分析することで、これら 4 つのグリッド クラスを使用して、より複雑なページ レイアウトを簡単に設計できるようになります。ただし、行内の 1 つの列が他の列よりも高くなるケースがまだあります。おそらく、あなたはまだ私が何を言っているのかよく分かっていないでしょうが、それは問題ではありません。早速本題に入りましょう。

まずは大画面でのページ表示効果を見てみましょう

最初の要素の高さは確かに異なります。次に、小さな画面を見てください。

現在の配置を見てください。小さな画面用に .col-xs-* スタイル クラスが選択され、それぞれが 6 つのコピーを占めています。これがあなたが望む効果かどうかは分かりません。では、これらの 4 つの要素を、小さな画面で 2 行に並べて、各行に 2 つの要素として表示したいですか?

次に、上記のコードを少し変更します。実際にはコード行を追加します。

この効果により、2 行 2 列が実現されます。もちろん、レスポンシブ ツールを使用することもできます。これについては後で詳しく説明しますが、ここでは例のデモンストレーションは行いません。

列オフセット

これは実はとても簡単です。スタイル クラス .col-md-offset-* を使用して、列を右にオフセットできます。これらのクラスは、* セレクターを使用してすべての列の左余白を増やします。たとえば、.col-md-offset-4 は、.col-md-4 を 4 列幅右に移動します。

上記のコードを読めば、おそらくそのレイアウトを想像できるでしょう。

ネストされた列

組み込みグリッドを使用してコンテンツをネストするには、新しい .row と一連の .col-md-* 列を既存の .col-md-* 列に追加します。ネストされた列に含まれる列の合計は 12 になる必要があります。

上記のコードから、最初に行が定義され、次にこの行に .col-md-9 列が追加され、この要素が 9 列を占めることが示されていることがわかります。

次に、この 9 列の要素に 2 つの異なる行が追加されます。

つまり、最初の行は 2 つの部分に分かれており、それぞれが 6 列を占め、合計 12 列を占めますが、その合計幅は、その外側の 9 列を占める要素の幅と同じです。

2 行目: 2 行目は 2 つの部分に分かれており、最初の部分は 3 列を占め、2 番目の部分は 6 列を占め、残りの 3 列は埋められません。

列の並べ替え

中国語のウェブサイトでは、.col-md-push-* と .col-md-pull-* を使用すると列の順序を簡単に変更できると説明されています。

コードを通じて実装し、その効果を確認しましたが、まだこの文を完全に理解していません。

ご覧のとおり、3 つの行を定義しました。

最初の行は 3 つの均等な部分に分割され、各部分には 4 つの列があります。この行は主に次の 2 つの行との比較用です。

2 行目には要素が 1 つだけあり、2 つの列を占めています。また、この要素には .col-md-push-4 スタイル クラスも追加されています。 (2 列を占める要素は 4 列右に移動され、5 列目と 6 列目を占めるようになります。)

3 列目は 2 つの部分に分かれています。最初の部分は 7 列を占めていますが、空です。2 番目の部分は 5 列を占めており、この要素に .col-md-pull-4 スタイルのクラスが追加されています。もちろん、このクラスは前の行で追加されたクラスとは逆の効果を持つはずです。 (5 列を占める要素は 4 列左に移動します。元々は 8 列目から始まっていましたが、現在は 4 列目から始まります。)

それではエフェクトの表示を見てみましょう

要約する

この記事では、最も単純なケースを使用して、ケースに関係するレイアウト ポイントを分析します。この記事を読んで、かなり勉強になった気がして、もう一度最初から読み直したい気分になりました。私の理解が不十分な部分もあるかもしれません。ご理解いただき、ご覧いただいた上級の専門家の方々が修正にご協力くだされば幸いです。よろしくお願いします。この記事を書いた後、私はとても気分がいいです。たくさんのことを学びました。もちろん、この記事が読者の皆さんの役に立つことを願っています。