グリッドシステムの比較：ブートストラップ3対ファンデーション5

BootstrapとFoundationは、特に迅速なWebサイトプロトタイピングのための私のお気に入りのフロントエンドフレームワークの2つです。どちらも私のワークフローをスピードアップするすぐに使用できるコンポーネントが付属しています。彼らの小さな違いを超えて、彼らの基本的な特徴のほとんどは私に似ています。

この記事では、グリッドの基本について説明します。まず、それらがどのように構造化されているかを紹介し、その主要なコンポーネントを説明し、画面のサイズに応じてどのように区別するかを示します。次に、獲得した知識を実践するのに役立つ本当の例を越えます。

始めましょう！

キーテイクアウト

ブートストラップとファンデーションの両方が、同様の基本的な機能を備えた人気のあるフロントエンドフレームワークですが、グリッド構造とカスタマイズオプションが異なります。
• Bootstrapは、レスポンシブレイアウト用の4つのピクセルベースのメディアクエリブレークポイントを指定し、Foundationには5つのEMベースのメディアクエリが含まれます。どちらのフレームワークも、行と列で構成されるモバイルファースト12カラムグリッドを提供します。
Bootstrapのグリッドには、コンテナまたはコンテナ流体のいずれかのクラスが必要な行のラッパー要素が必要です。一方、財団のグリッドは少しシンプルで、ラッパー要素は必要ありません。
• Foundationは、ブロックグリッドと呼ばれる追加のグリッド機能をサポートしています。これにより、マークアップが最小限のサイズの列を作成できます。 Bootstrapは同様の機能を提供しません
• メディアクエリの比較
• ブートストラップとファンデーションのグリッド構造を分析する前に、まずレスポンシブレイアウトを提供するブレークポイントを見てみましょう。これらは、各フレームワークが提供する利用可能なグリッドの数を設定するために使用されます。
ブートストラップは、4つのピクセルベースのメディアクエリブレークポイントを指定します。下の表は、それらを示しています

画面

ビューポートサイズ

コンテナ幅

class prefix 余分な小さな画面 財団には、5つのEMベースのメディアクエリが含まれています。これらは次の表に示されています： 画面 ビューポートサイズ

クラスプレフィックス（デフォルトのグリッド）

classプレフィックス（ブロックグリッド） 小さな画面 ≤40em（640px） .small-* .column（s） .small-block-grid-* 中画面 ≥40.063em（641px） .medium-* .column（s） .medium-block-grid-* 大きな画面 ≥64.063em（1025px） .large-* .column（s） .large-block-grid-* Xlarge画面 ≥90.063em（1441px） アクティブ化されていません アクティブ化されていません xxlarge画面 ≥120.063em（1921px） アクティブ化されていません アクティブ化されていません これらのメディアクエリがどのように機能するかについてのアイデアを提供するために、Bootstrapデモと関連するFoundationデモをご覧ください。しかし、まだ少し混乱している場合、今後のセクションは物事を明確にします。

注：xlargeおよびxxlarge画面用の基礎のグリッドは、デフォルトで非アクティブ化されています。それらを使用したい場合は、$ including-xl-html-grid-classesと$ include-xl-html-block-grid-classes変数の値を「concomment」して設定する必要があります。これらの変数は、_settings.scss partialに見つけることができます グリッド構造

BootstrapとFoundationは、それぞれ、行と列で構成されるモバイルファースト12カラムグリッドを提供します。列は列の内側にネストされています。彼らは各行に対して最大12をスケールアップします。行は列内にもネストできます。

両方のフレームワークには、列のサイズを設定するために使用できる多くの事前定義されたクラスが付属しています。上記のように、Bootstrapには4つのメディアクエリブレークポイントが含まれており、Foundationには5つあります。各グリッドには、列のサイズを設定するために使用できる異なるクラスのプレフィックスがあります（2つのテーブルを参照）。

ブートストラップのグリッドには、行のラッパー要素も必要です。これには、コンテナまたはコンテナ流体のクラスが必要です。コンテナクラスの要素は固定幅があり、これはビューポートによって異なります（上記の最初の表を参照）。一方、コンテナ流体のクラスを持つ要素が展開して、ブラウザウィンドウの幅全体を埋めるために拡張します。

列！= 12？

グリッド内の列の数が正確に12ではない可能性があります。そのような場合、ブートストラップは最後の列を左に浮かび、基礎は右に浮かびます。財団のデフォルト動作をオーバーライドする場合は、最後の列にエンドクラスを追加します。

このアクションの違いを確認するには、ブートストラップの例と基礎の例を見ることができます。

ユーティリティクラス

両方のフレームワークは、グリッドをカスタマイズするための柔軟性を提供する追加のクラスを提供します。

可視クラスでは、特定の画面サイズに基づいてコンテンツを表示または非表示にすることができます。オフセットクラスを使用すると、不完全な列を中心にするか、間の間隔の量を調整できます。異なるデバイスで列の順序を指定するクラスもあります。 これらのすべての異なるクラスの例は、このブートストラップデモとこの基礎デモに示すことができます。

ブロックグリッド

デフォルトのグリッドを超えて、Foundationはブロックグリッドと呼ばれる別のグリッド機能をサポートしています。これにより、最小限のマークアップで等しいサイズの列を作成できます。それを使用するために、行をUL要素として定義し、その中の列をLI要素として定義します。次に、関連するクラス（上記の2番目の表を参照）をUL要素に適用して、列サイズを指定します。

この時点で、通常のグリッドとブロックグリッドの違いは何ですか？そのうちの2つを簡単に見てみましょう：

1. 各行に最大幅を適用するデフォルトのグリッドとは異なり、ブロックグリッドは常に完全なウィンドウの幅を埋めます。
ブロックグリッドは、等しいサイズのアイテムにのみ使用できます。
グリッドの違いをよりよく示すために、ここにデモがあります。

グリッドを使用して

これら2つのフレームワークのグリッドをよく理解しているので、それらを使用してブートストラップページと対応するファンデーションページを構築する方法を見てみましょう。

下のスクリーンショットは、ビルドする最初のレイアウトを示しています。

ブートストラップから始めて、コンテナのクラスを持つ要素を定義します。前述のように、このクラスは、画面サイズに応じて値を持つ要素に固定幅を設定します（ブートストラップテーブルを参照）。次に、列のクラスを含む要素を追加します。

今、列をセットアップする準備ができました。大きな画面には、4つの等しいサイズの列が必要です。そのため、COL-LG-3のクラスでそれぞれ4つのDIV要素を定義します。ただし、中小デバイスの場合、行ごとに2つの列を持つことを好みます。このため、COL-SM-6クラスを使用しています。最後に、小さいデバイスの場合、列を積み重ねてほしいと思います。これは、モバイルファーストフレームワークのデフォルトの動作であるため、Col-XS-12クラスを定義する必要はありません。 HTMLの外観は次のとおりです

財団を続けましょう。

財団のグリッドはBootstrapのグリッドと非常に似ていますが、少し簡単です。まず、列を含む行のクラスで要素を定義する必要があります。このクラスは、要素の最大幅を62.5レム（1000px）に設定します。次に、列を追加します。これを達成するために、列または列のクラスを使用してそれぞれをDiv要素を指定し、対応するグリッドクラスを使用して幅を設定します（上の基礎表を参照）。繰り返しますが、小さなデバイスの場合、Small-12クラスを定義する必要はありません。

Foundationのグリッドに基づくHTMLは次のとおりです

この時点で、2つのフレームワークのグリッドシステムに精通し始めたことを願っています。しかし、おそらく別の例がこれをより明確にするのに役立つでしょう この次のケースでは、フッターを構成します。次のグラフィカル表現は、私たちがそれをどのようにスタイリングしたいかを示しています：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

ここでは、前の例と比較して別のレイアウトモードを選択します。 中程度の画面サイズとアップ（またはBootstrapのグリッドの場合は小さくても）の場合、3つの列を表示します。ただし、最後の列にネストされた行があることに注意してください。これは2つの列で構成されています。幅をすべてのデバイスの行の幅の50％に設定します。最後に、ネストされた列に表示されているアイコンの可視性を調整します。

Bootstrapのコードは次のとおりです

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

および基礎を備えています：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

注：ブロックグリッドの代わりに、ネストされた行を作成するためにFoundationのデフォルトグリッドを使用できた可能性があります。 結論

Bootstrapのグリッドシステムに関する詳細情報が必要な場合は、Syed Fazle Rahmanの記事を理解しているBootstrapのグリッドシステムを読んでください。 この記事では、BootstrapとFoundationの両方のグリッド構造を紹介しました。次に、実際のプロジェクトでグリッドを活用する方法を検討しました。ご覧のとおり、両方のグリッドは似ており、さらにカスタマイズできます。

この記事を読んで楽しんでいただければ幸いです。ここで学んだことを自分のプロジェクトに適用できるかもしれません。いつものように、以下のコメントでこれらのフレームワークについてのあなたの考えを自由に共有してください。 ブートストラップvs Foundation

に関するよくある質問（FAQ） ​​

BootstrapとFoundationはどちらもWeb開発に使用される人気のあるフロントエンドフレームワークです。ただし、いくつかの重要な違いがあります。 Bootstrapは、その広範な機能と事前にスタイルのコンポーネントで知られています。これにより、デザインを迅速にプロトタイプしたい初心者や開発者に最適です。一方、Foundationはより柔軟でカスタマイズ可能であるため、設計をよりコントロールしたい開発者にとって好ましい選択肢となります。また、ブートストラップと比較してより複雑なグリッドシステムを備えています。

ブートストラップまたはファンデーションはレスポンシブデザインのために優れていますか？ただし、Foundationはモバイルファーストアプローチを採用しています。つまり、モバイルデバイスを念頭に置いて設計されており、より大きな画面を拡大します。一方、Bootstrapは当初、デスクトップファースト向けに設計されていましたが、その後、Bootstrap 3以降からモバイルファーストアプローチを採用しています。どちらのフレームワークもレスポンシブデザインを提供しますが、2つの間の選択は個人の好みとプロジェクトの要件に帰着することがよくあります。ブートストラップのグリッドシステムは、基礎と比較してどのようになりますか？コンテンツを構成および整列させるグリッドシステムですが、わずかに異なる方法で行います。 Bootstrapは、12列のグリッドシステムを使用します。これは、理解して使用しやすいです。一方、基礎は、最大12の列を使用するようにカスタマイズできる柔軟なグリッドシステムを使用しています。これにより、ファンデーションのグリッドシステムがより柔軟になりますが、使用しやすくなります。

ブートストラップとファンデーションのカスタマイズオプションの違いは何ですか？

BootstrapとFoundationはカスタマイズオプションを提供しますが、アプローチは異なります。 Bootstrapは、コンポーネントと変数を簡単にカスタマイズできるカスタマイザーツールを提供します。一方、ファンデーションは、設計をより制御できるSASSベースのカスタマイズシステムを使用しますが、SASSを十分に理解する必要があります。 🎜> BootstrapとFoundationの両方に、Webサイトに機能を追加するJavaScriptコンポーネントのセットが付属しています。 BootstrapのJavaScriptコンポーネントはjQueryに基づいていますが、Foundationは2つのバージョンを提供します。1つはjQueryを使用し、1つはZepto.jsを使用しているものを使用します。どちらのフレームワークのJavaScriptコンポーネントもモジュール式です。つまり、必要なもののみを含めることができます。 BootstrapとFoundationの両方がアクセスできるように努力していますが、さまざまな方法でアプローチします。 Bootstrapには、コンポーネントに多くのアクセシビリティ機能が含まれており、詳細なアクセシビリティドキュメントを提供します。一方、Foundationには、フレームワークに組み込まれた一連のアクセシビリティツールがあり、包括的なアクセシビリティドキュメントも提供しています。

どのフレームワークを選択する必要がありますか：ブートストラップまたはファンデーション？

​​

ブートストラップとファンデーションの選択は、あなたのニーズと好みに大きく依存します。広範な機能、プレスタイルのコンポーネント、大規模なコミュニティを備えたフレームワークが必要な場合は、ブートストラップがより良い選択かもしれません。より柔軟でカスタマイズ可能で、モバイルファーストアプローチをとるフレームワークを好む場合、ファンデーションがより適している可能性があります。

以上がグリッドシステムの比較：ブートストラップ3対ファンデーション5の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。