ブートストラップを使用した開発エンジニア、フロントエンド開発者、ファンデーションを使用します。その理由について話しましょう。
BootstrapとFoundationには多くの重要な違いがありますが、1つのことを覚えておく必要があると思います。
ZurbとTwitterの2つのデザインコンセプトは非常に明確です。独自のフレームワークの命名から見ることができるため、BootstrapはBootstrap、Bootstrapを意味します。つまり、プロジェクトで必要なすべてを処理しようとします。財団とは、創造、創造、言い換えれば、それはあなたのプロジェクトの強い創造性を与えるだけです。
このビューを維持すると、2つの主要な違いをさらにリストします。
1。UI要素
Foundationはいくつかの限られた要素のみを配置しますが、Bootstrapは想像できるすべての要素を提供します。
FoundationのZurbの設計目標は、事前定義されたUI要素を使用していても、Webサイトにあまり似ていないはずであることです。
一方、 Bootstrapは、定義されたすべてのUI要素を提供しようとします。
2。Remsvsピクセル
FoundationはREMを使用し、 Bootstrapはピクセルを使用します。
ピクセルを使用すると、異なるデバイスがディスプレイ効果に大きな違いがある傾向があるため、高さ、幅、内側のマージン、コンポーネントの外側のマージン、および各デバイスと画面サイズを正確に定義する必要があります。
現在、Foundation 5はemではなくremを使用しています。これにより、EMカスケードの問題が回避されます。
REMSを使用すると、フォントサイズ:80%を使用できます。コンポーネント全体とそのサブコンポーネントを20%削減します。
REMSを使用すると、ピクセルの詳細を取り除くことができるので、レムを使用してそれらを処理する価値があることに言及する価値があります。
Foundationは、ピクセルをREMに変換するためのSASSの混合方法も提供しているため、Pixels Thinkingメソッドを使用してページを定義し続けることができます。
.element {width:rem-calc(10px); // remsに変換されます}3。柔軟なグリッドと事前定義されたグリッド
Foundationのグリッドは、現在のブラウザの幅に自動的に適応できます。 Boostrapは、主流のデバイスや画面に適応するために、いくつかのグリッドサイズを事前に定義しました。
ブラウザの幅を変更すると、ブートストラップは突然グリッドを変更します。
Foundationは、現在のブラウザ幅に柔軟に適応します。これは新しい技術的方法です。自動的に適応している間、トランスと同じ効果を実行できます。
グリッドが変更されると、基礎には2つの重要なポイントがあります。すべての操作は削減され、拡大され、現在のブラウザの幅に適応されます。事前定義された画面サイズは必要ありません。より重要な理由は、画面のサイズに基づいてさまざまなスタイルを定義することをお勧めします。
Bootstrapを使用して、固定またはマニホールドメッシュを取得します。つまり、メッシュコンテナの事前定義された幅を設定する必要があります。
ファンデーションとSASSを使用すると、最大のグリッドのサイズ(中程度と小さいグリッドが自動的に計算されます)、大きな画面の列数、および小さな画面の列数を自由に調整できます。
4.モバイルデバイスが推奨されます。モバイルデバイスもサポートされています
Foundationは、4コーナーの画面を念頭に置いて設計されています。 Bootstrapは、携帯電話、タブレット、デスクトップ、特大の画面を備えたデスクトップなど、事前に配信されたもので設計されています。
モバイルデバイスをサポートするモバイルファーストWebサイトを構築することは、より大きな画面で確実に利用できることを意味します。したがって、財団はこれを行うことを奨励しています:モバイルファースト。
ファンデーションのSASSメディアクエリMixinを使用すると、モバイルデバイスとは何かをクエリする特定のメディアクエリがないことがわかりますが、メディアクエリを使用して、より大きな画面に表示する方法を定義します。
物事を設計するときに最初にデスクトップコンピューターを検討する場合、小さな画面をサポートするときに大きな問題に遭遇する可能性があります。最初に携帯電話を検討すると、ユーザーにとって最も重要なことに焦点を合わせ、空間感を高めます。
5。コミュニティ
ブートストラップにはより大きなコミュニティがあります。そして、基礎を使用すると、より自立しなければなりません。
ブートストラップの大きなハイライトはコミュニティです。それは非常に巨大で、包括的であり、あなたが望むほとんどすべてを見つけることができます。
基礎を選択した場合、自立はあなたが習得しなければならないものかもしれません。ほとんどすべてのソリューションはブートストラップ用であり、独自のものしか構築できません。
結論は
いくつか質問をしてください:
何かがもっと便利になりたいのですか、それとももっとリアルにしたいですか?
独自のCSSを整理して、基礎となるコンポーネントにしたいですか?
答えは次のとおりです。ブートストラップ。財団。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
これは興味深い比較ですか?誰もがフロントエンドフレームワークスブートストラップ3とファンデーション5を理解することが役立つことを願っています。