【5】Bootstrapのプリセットグリッドを理解する system_html/css_WEB-ITnose

始める前に、クラスについて話しましょう。後で使用するためです。

<div class="container">  ...</div>

ページ上のコンテンツを .container で囲むことで、中央揃えを実現できます。コンテナの幅は、グリッド システムに一致するように、さまざまなメディア クエリしきい値内に設定されます。

注: パディングと固定幅の設定のため、.container はネストできません。

「さまざまなメディアクエリのしきい値範囲」が何なのかを知らない人もいるかもしれません。ここで言いたいのは、一連の範囲が定義されているということです (この範囲にはいくつかの間隔があります)。現在使用しているブラウザーの幅の値 (つまり、視覚領域) がこの一連の範囲の特定の範囲内にある場合、 Web ページを一定間隔で閲覧するためのソリューションです。 (これを言って皆さんに理解してもらえるかわかりませんが、汗￣□￣｜｜)

========================= ======= ========================================== ======= =================

【1】グリッドシステムを紹介しよう（公式サイトより抜粋）

Bootstrapにはセットが組み込まれています応答性の高いモバイル デバイスの最適化 画面デバイスまたはビューポートのサイズが大きくなるにつれて、最大 12 列に自動的に分割される推奨の流体グリッド システム。

1. 使いやすい事前定義されたクラスが含まれています (これが私たちが話していることです。これが公式の中国語のタイプミスであるかどうかはわかりませんが、クラスの後に余分な e があるのはなぜですか)。また、よりセマンティックなレイアウトを生成するための強力なミックスインもあります (これは私たちが話していることではありません。必要なグリッド レイアウトをカスタマイズするのと同じです。デフォルトのプリセット クラスで十分です。さらに詳しく知りたい場合は、次のことを勉強してください)それは自分自身です）。

=============================================== == =============================================== =

【2】グリッド システムを使用して、行と列を組み合わせてページ レイアウトを作成し、作成したレイアウトにコンテンツを配置できます。

以下では、Bootstrap グリッド システムの動作原理を紹介します:

1. 適切な配置とパディングを与えるために、「Row」を .container に含める必要があります。

3. コンテンツは「column」内に配置する必要があります。「column」のみが行の直接の子要素として使用できます。ブートストラップ ソース コードで定義されたミックスインを使用して、セマンティック レイアウトを作成することもできます。次に、それらの間のギャップ (ガター) を設定します。最後にパディングの効果をオフセットします。
6. グリッド システムの列は、1 ～ 12 の値を指定することで範囲を表します。たとえば、3 つの .col-x を使用して、3 つの等しい幅の列を作成できます。 -4

全画面レイアウト方法:

ブラウザーのビューポート全体を占有する必要があるページの場合、マージンをオフセットするためにコンテンツ領域をコンテナー要素内でラップし、padding: 0 15px; を指定する必要があります。 .row: 0 -15px; に設定します (そうしないと、ページが左右に 15px 超えてしまい、ページの下部が水平に表示されます。

ps)上記の文章はほとんど理解できませんでしたが、理解できない人でも、このグリッドを使用することで理解できるようになります。

======================================== ======== ========================================== ======

たくさんの公式ウェブサイトを抜粋した後、冒頭で述べた「さまざまなメディアクエリのしきい値範囲」、つまりグリッドオプションに戻って見てみましょう

【3】グリッドオプションはBootstrapのグリッドの仕組みです。システムはさまざまな画面デバイスで動作します。中国の公式ウェブサイトが提供する表を見てみましょう

表から、間隔は自分のデバイスに対応しており、表示可能な領域は x であると仮定します。 2px≤x＜1200px

デスクトップ