ブートストラップなしで何を使用するか?

ブートストラップなしで何を使用するか?

ブートストラップなしで Foundation を使用できます。通常、開発エンジニアはブートストラップを使用し、フロントエンド開発者は Foundation を優先します。

Bootstrap と Foundation の間には多くの重要な違いがありますが、覚えておく必要があるのは 1 つのことだけだと思います:

ZURB と Twitter の 2 つの設計哲学は、その組み合わせから非常に明確です。独自のフレームワークの名前からわかるように、Bootstrap は起動時にガイドおよびブートストラップすることを意味します。つまり、プロジェクトで必要なものすべてを処理しようとします。Foundation は作成することを意味します。つまり、必要なものすべてを提供するだけです。

#その視点を維持したまま、この 2 つの主な違いをさらに列挙してみましょう:

1. UI 要素

Foundation は限られた数の要素のみを配置しますが、Bootstrap は想像できるすべての要素を提供します。

ZURB の Foundation の設計目標は、事前定義された UI 要素を使用する場合でも、見た目があまりにも似てはいけないことです。

一方、Bootstrap は、定義されたすべての UI 要素を提供しようとします。

2. REM VS ピクセル

Foundation は REM を使用しますが、Bootstrap はピクセルを使用します。

ピクセルを使用するということは、コンポーネントの高さ、幅、パディング、マージンを、各デバイスと画面サイズで正確に定義する必要があることを意味します。デバイスが異なる場合が多いためです。

現在、Foundation 5 は EM の代わりに REM を使用しています。このようにして、EM カスケード問題は回避されています: http://css-tricks .com/font-sizing-with-rem/

REM を使用するということは、font-size: 80%; を直接使用して、コンポーネント全体とそのサブコンポーネントを 20% 小さくできることを意味します。ピクセルの詳細から離れるため、REM を使用して処理することは非常に価値があります。

Foundation では、ピクセルを REM に変換するための Sass mixin メソッドも提供しています。この方法で、ピクセルを引き続き使用できます。ページを定義する考え方:

.element {
  width: rem-calc(10px); // will be converted to REMs
}

3. 柔軟なグリッド VS 事前定義されたグリッド

Foundation のグリッド 現在のブラウザーの幅に自動的に適応できます。主流のデバイスや画面に適応するためのいくつかのグリッド サイズ。

Bootstrap は、ブラウザの幅を変更すると突然変更します。Grid.

Foundation は、現在のブラウザの幅に柔軟に適応します。これは、新しい技術手段です。自動的に適応しながら、Transformer と同じ効果を発揮できます。

基礎 グリッドが変化するときは、小、中、大の 2 つの主要なポイントがあります。すべての操作は縮小と拡大のみであり、それに適応します現在のブラウザの幅。事前定義された画面サイズは必要ありません。主な理由は、画面のサイズに応じてさまざまなスタイルを定義することを奨励することです。

Bootstrap を使用すると、固定または多様体を取得できます。グリッド, つまり、グリッド コンテナを個別に設定または構成する必要があります。事前定義された幅ではありません。

Foundation と Sass を使用すると、最大のグリッドのサイズを自由に調整できます (中と小は自動的に計算されます)。大きい画面の列数と小さい画面の列数 Number.

4. モバイル デバイスが最初 VS はモバイル デバイスもサポートします

基盤は設計されていますBootstrap は、モバイル、タブレット、デスクトップ、特大画面デスクトップなど、あらかじめ設計されています。

モバイルファーストの Web サイトを構築すると、確実に大きな画面でも使用できるようになります。 Foundation はこれを行うことを推奨しています: Mobile Prioritize.

Foundation の Sass Media Query Mixin を使用すると、モバイル デバイスが何であるかをクエリするための特定の Media Query はありませんが、Media Query を使用することがわかります。大きな画面に何を表示するかを定義します。表示方法。

最初にデスクトップを念頭に置いて何かを設計した場合、小さな画面をサポートする際に大きな問題が発生する可能性が高く、携帯電話を最初に考えた場合は、大きな問題が発生する可能性があります。を使用すると、ユーザーにとって最も重要なことに集中できるようになり、スペースの使用感が向上します。

5. コミュニティ

Bootstrap には、より大きな

Bootstrap の最大のハイライトはコミュニティです。これは非常に巨大で包括的なコミュニティであり、探しているものはほぼすべて見つかります。 .

Foundation を選択した場合は、自立性を習得する必要があるかもしれません。ほとんどすべてのソリューションはブートストラップ用であり、独自のソリューションを構築することしかできません。

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