ブートストラップは応答性がありますか?

ブートストラップは応答性があります。 Bootstrap は、さまざまな画面にさまざまなクラス属性を使用する、応答性の高いモバイル デバイス ファーストの流体グリッド システムを提供します。開発中は、携帯電話、タブレット、および PC で心配することなく使用できるコード セットのみを作成できます。 . メディアクエリを使用します。

#この記事の動作環境: Windows 7 システム、bootstrapv4.4.1 バージョン、Dell G3 コンピューター。

応答性とは何ですか?

レスポンシブ Web デザインは、ユーザーがさまざまなサイズのデバイスで Web サイトを閲覧するときに優れた視覚効果を得ることができる方法です。例えば、パソコンのモニターでウェブサイトを閲覧し、次にスマートフォンで閲覧する場合、スマートフォンの画面サイズはパソコンのモニターに比べてはるかに小さいですが、違いはほとんど感じられません。ほぼ同じです。これは、Web サイトのレスポンシブ デザインが素晴らしい仕事をしていることを意味します。

ブートストラップは応答性がありますか?

ブートストラップは応答性があります。

Bootstrap は、応答性の高いモバイルファーストの流体グリッド システムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に 12 列に分割されます。グリッド システムは、一連の行と列を通じてページ レイアウトを作成するために使用されます。

Bootstrap のレスポンシブ レイアウトはグリッド システムを使用し、画面ごとに異なるクラス属性を使用します。開発中は、メディア クエリの使用 (デバイスごとに異なるコードの作成) を考慮する必要がなく、携帯電話、タブレット、PC で使用できるコード セットは 1 つだけ作成できます。

グリッド システムの実装原理は、コンテナのサイズを定義し、それを 12 等分の部分に分割します (24 または 32 の部分に分割することもできますが、12 部分が最も一般的です)。内側と外側のマージンを調整し、最後にメディア クエリを組み合わせて強力な応答性の高いグリッド システムを作成します。 Bootstrap フレームワークのグリッド システムは、コンテナを 12 等分に分割します。

Bootstrap グリッド システムの仕組み:

「行」は、順番に .container (固定幅) または .container-fluid (100% width) に含まれている必要があります。適切な配置とパディングを与えるために。

「行」を経由して横方向に「列」の集合を作成します。

コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になることができます。

.row と同様 .col-xs-4 などの事前定義クラスグリッド レイアウトをすばやく作成するために使用できます。ブートストラップ ソース コードで定義されたミックスインは、セマンティック レイアウトの作成にも使用できます。

「列 (列)」により、ギャップ (ガター) を作成するためのパディング属性を設定します列間の.row 要素に負のマージンを設定して、.container 要素に設定されたパディングをオフセットすることで、間接的に「行」になります。含まれる「列」がパディングをオフセットします。

負のマージンは、次の例が目立っています。ラスター列の内容が並んでいます。

ラスター システムの列は、1 ～ 12 の値を指定することによって、その範囲で表されます。たとえば、3 つの等しい幅の列は、 .col-xs-4.

「行」に含まれる「列」が 12 より大きい場合、余分な「列」の要素はまとめて別の行に配置されます.

Grid グリッド クラスは、ブレークポイント サイズ以上の画面幅を持つデバイスに適用され、小さな画面デバイスの場合はグリッド クラスがオーバーライドされます。したがって、要素に .col-md-* グリッド クラスを適用すると、これは、ブレークポイント サイズのデバイス以上の画面幅を持つデバイスに適用され、小さな画面デバイスのグリッド クラスをオーバーライドします。したがって、要素に .col-lg-* を適用しても、大画面デバイスには影響しません。

##推奨:

ブートストラップ ビデオ チュートリアル

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