ブートストラップグリッドとは

bootstrap グリッドは、Bootstrap のグリッド システムを指します。Bootstrap は、応答性の高い、モバイル デバイスファーストの流体グリッド システムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割されます。

この記事の動作環境：Windows7システム、bootsrap3.3.7バージョン、DELL G3コンピュータ

ブートストラップグリッドとは?

Bootstrap のグリッド システム。

Bootstrap は、画面またはビューポートのサイズが大きくなるにつれて、最大 12 列に自動的に分割される、応答性の高いモバイルファーストの流体グリッド システムを提供します。

グリッドとは何ですか?

Wikipedia からの抜粋:

グラフィック デザインにおいて、グリッドとは、コンテンツ (通常は 2D) を整理するために使用される、一連の交差する直線 (垂直、水平) で構成される構造です。印刷デザインにおけるデザインレイアウトやコンテンツ構造に広く使用されています。 Web デザインにおいて、一貫したレイアウトを迅速に作成し、HTML と CSS を効果的に使用するための方法です。

簡単に言うと、Web デザインにおけるグリッドは、コンテンツを整理し、Web サイトをナビゲートしやすくし、ユーザー側の負荷を軽減するために使用されます。

ブートストラップ グリッド システムとは何ですか?

Bootstrap の公式ドキュメントのグリッド システムの説明:

Bootstrap には、デバイスに合わせて変更したり、12 列まで適切に拡張したりできる、応答性の高いモバイルファーストの流動的なグリッド システムが含まれていますビューポートのサイズが大きくなるにつれて。これには、単純なレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。

上記の文を理解しましょう。 Bootstrap 3 は、Bootstrap コードが小さな画面デバイス (例: モバイル、タブレット) 上のコンポーネントとグリッドから始まり、その後、大画面デバイス (例: ラップトップ、デスクトップ) 上のコンポーネントとグリッドに拡張されるという意味で、モバイルファーストです。

モバイルファースト戦略

• コンテンツ

何が最も重要かを決定します。

• レイアウト

幅を小さくしたデザインを優先します。

基本的な CSS はモバイルファーストであり、メディア クエリはタブレットとデスクトップ コンピューター用です。

• Progressive Enhancement

画面サイズが大きくなるにつれて要素を追加します。

レスポンシブ グリッド システム 画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。

推奨される学習: 「ブートストラップの使用方法のチュートリアル」

以上がブートストラップグリッドとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。