BootstrapとFoundationは、特に急速に開発するWebサイトのプロトタイプで、私のお気に入りのフロントエンドフレームワークの2つです。それらはすべて、すぐに使用できるコンポーネントを提供し、ワークフローを高速化します。いくつかの小さな違いを除いて、それらの基本的な特性のほとんどは私に似ているように思われます。
この記事では、それらのグリッドの基本構造を紹介します。まず、それらがどのように構築されているかを紹介し、主要なコンポーネントを説明し、さまざまな画面のサイズに違いを示す方法を説明します。その後、実際の例の実践を通じて知識を追加するのを手伝います。
一緒に始めましょう！
比較1：メディアクエリの比較
ブートストラップとファンデーションのラスター構造を分析する前に、応答レイアウトに提供するブレークポイントを見てみましょう。これは、利用可能なラスターの数を設定するために各フレームが提供するものです。
Bootstrapは、4つのPXベースのメディアクエリブレークポイントを指定します。次のように表示されます：
Foundationには、5つのEMベースのメディアクエリが含まれています。次の表に示されています。
メディアクエリがどのように機能するかを理解するために、Bootstrapのデモと関連するFoundationデモをチェックすることをお勧めします。しかし、あなたがまだ混乱している場合、次の部分はすべてを説明します。
注：ファンデーションのメッシュと超大型画面は、デフォルトで無効になっています。それらを使用したい場合は、2つの変数の値を「キャンセル」し、$ XL-HTML-GRID-CLASSESと$ include-XL-HTML-BLOCK-GRID-GRID-CLASSESをTrueに設定する必要があります。これらの変数は、_settings.scssセクションで見つけることができます。
比較2：グリッド構造
BootstrapとFoundationの両方が、行と列で構成される最初の12列グリッドを動かします。列は行にネストされています。各行の列の合計は12列です。行は列にネストすることもできます。
これらの2つのフレームワークには、列のサイズを設定するために使用できる多くの事前定義されたクラスが含まれています。上記のように、Bootstrapには4つのメディアクエリブレークポイントが含まれ、ファンデーションには5つが含まれています。各グリッドには、列サイズを設定するために使用できるさまざまなクラスのプレフィックスがあります（上の2つの表を参照）。
ブートストラップグリッドラインには、カプセル化された要素も必要です。これには、コンテナまたはコンテナ流体クラスが必要です。要素のコンテナクラスには固定値があり、その値はウィンドウに依存します（上の最初の表を参照）。
比較3：列！= 12？
グリッドシステム内の列の数が12に等しくない可能性があります。この場合、ブートストラップは最後の列を左に浮かび、基礎は右に浮かびます。 Foundationのデフォルト動作をオーバーライドする場合は、最後の列に.Endクラスを追加します。
比較4：機能クラス
どちらのフレームワークも、メッシュを非常に柔軟に定義できる追加のクラスを提供します。
目に見えるクラスを使用すると、特定のサイズの画面にコンテンツを表示または非表示にすることができます。オフセットクラスを使用すると、不完全な列を中心にしたり、間の間隔を調整したりできます。もちろん、異なるデバイスに従って列の順序を指定できる他のクラスがあります。
比較5：グリッドブロック
デフォルトのグリッドに加えて、Foundationは別のラスター機能、つまりグリッドブロックをサポートします。これにより、最小のマークで同じサイズの列を作成できます。それを使用するには、行をUL要素として定義し、行の列をLI要素として定義します。次に、関連するクラスをUL要素に適用して、列のサイズを指定します（詳細については、上の2番目の表を参照）。
現時点では、通常のグリッドとグリッドブロックの違いは何ですか？それらの2つの違いを簡単に見てみましょう。
デフォルトのグリッドとは異なり、（グリッドブロック）各行の最大幅が適用されるため、ブラウザウィンドウ全体が常にカバーされます。
メッシュブロックは、同じサイズのプロジェクトでのみ使用できます。
グリッドを使用します
これらの2つのフレームワークのグリッドをよく理解できるようになったので、それらを使用してブートストラップページと対応するファンデーションページを作成する方法を見てみましょう。
次のスクリーンショットは、私たちがビルドする最初のレイアウトを示しています。
ブートストラップから始めて、コンテナクラスで要素を定義します。前述のように、このクラスは、画面のサイズに応じてこの要素の固定幅を設定します（詳細については、Bootstrapの表を参照）。次に、クラスの行がある要素を追加します。
これで、列をセットアップする準備が整いました。大きな画面には、同じサイズの4つの列が必要です。したがって、COL-LG-3クラスでそれぞれ4つのDIV要素を定義します。ただし、中小規模のデバイスの場合、各行に2つの列を使用することをお勧めします。このため、COL-SM-6クラスを使用しています。最後に、非常に小さい画面では、列を積み重ねてほしいと思います。これは、最初のフレームワークを移動するデフォルトの動作であるため、Col-XS-12クラスを定義する必要はありません。
そのHTMLは次のように見えます：
<div> <div> <div> <！ - content-> </div> <div> <！ - content-> </div> <div> <！ - content-> </div> <div> <
財団を見てみましょう。
ファンデーションのメッシュは、ブートストラップのメッシュに非常に似ていますが、少し簡単です。まず、列を含む行クラスで要素を定義する必要があります。このクラスは、要素の最大幅を62.5REM（1000px）に設定します。次に、列を追加します。これを実現するために、各Div要素には列または列クラスがあることを指定し、対応するラスタークラス（上記のファンデーションの表を参照）を使用して幅を設定します。同様に、小さなデバイスの場合、Small-12クラスを定義する必要はありません。
これは、ファンデーションラスターに基づくHTMLです。
<div> <div> <！ - content-> </div> <div> <！ - content-> </div> <div> <
現時点では、これら2つのフレームワークのグリッドシステムに精通し始めたと思います。しかし、おそらく別の例は、より明確に理解するのに役立ちます。
次の例では、フッターを構築します。次の図は、私たちが望むスタイルを示しています：
ここでは、前の例と比較するために別のレイアウトを選択します。中画面以上の画面（またはブートストラップグリッドの上記の小さな画面がある画面）の場合、3つの列を表示する必要があります。ただし、最後の列にネストされた行があることに気付きました。これは2つの列で構成されています。すべてのデバイスで幅の半分に幅の半分に設定します。最後に、ネストされた行に表示される画像の可視性を調整します。
これがブートストラップのコードです：
<div> <div> <div> <！ - content-> </div> <div> <！ - content-> </div> <div> <div> <a href = "＃"> <p>会って議論しましょう</p> <i> </i> </div> <！ - .col-sm-4-> </div> <！ - .row-> </div> <！ - .container - >
財団のコードは次のとおりです。
<div> <div> <！ - content-> </div> <div> <！ - content-> </div> <div> <ul> <li> <a href = "＃"> <p>会って議論しましょう</p> <i> </i> </a> </li> <li> <！ - コンテンツ - > </li> .row->
注：メッシュブロックを交換する場合は、基礎のデフォルトメッシュを使用してネストされた行を作成できます。
結論は
ブートストラップグリッドシステムの詳細情報が必要な場合は、この記事をご覧ください。「ブートストラップは毎日（レイアウト）について学ぶ必要があります」
最後に、この記事では、BootstrapとFoundationのメッシュ構造を紹介します。その後、実際のプロジェクトでグリッドの使用方法を見ました。ご覧のとおり、すべてのグリッドは似ており、さらに定義できます。
この記事が気に入っていただければ幸いです。たぶん、あなたはあなたが学んだことをあなたのプロジェクトに適用することができます。 Bootstrapコンテンツの詳細については、「Bootstrap Learning Tutorial」をフォローしてください。お読みいただきありがとうございます。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。