Bootstrap を使用してグリッド システムを作成する方法

今回お届けするのは Bootstrap グリッド システムの作成方法です。Bootstrap でグリッド システムを作成することが非常に重要であることがわかります。この記事では詳細な分析を説明します。

Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、Web 開発を高速化します。

グリッド システムは Bootstrap の中核です。Bootstrap がこれほど強力な レスポンシブ レイアウト ソリューションを実現できるのはまさにグリッド システムの存在です。

公式ドキュメントには次のように書かれています:

ブートストラップ 画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割される、応答性の高いモバイルファーストの流体グリッド システムを提供します。シンプルなレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。

この段落を理解すると、最も重要な部分はモバイル デバイスの優先順位であることがわかります。それでは、モバイル デバイスの優先順位とは何でしょうか?

Bootstrap の基本的な CSS コードは、デフォルトで小さな画面デバイス (モバイル デバイス、タブレットなど) から始まり、メディア クエリ を使用して大画面デバイス (ラップトップ、デスクトップ コンピューターなど) のコンポーネントとグリッドに拡張します。

次の戦略があります:

内容: 何が最も重要かを決定します。
レイアウト: 幅が狭いデザインを優先します。
プログレッシブ拡張: 画面サイズが大きくなるにつれて要素が追加されます。

グリッド システムは、行と列の一連の組み合わせを通じて ページ レイアウト を作成するために使用され、作成されたこれらのレイアウトにコンテンツを配置できます。

次のように動作します:

「行」は .container (固定幅) または .container-fluid (100%) に含まれている必要があります width) を調整して、適切な位置合わせとパディングを行います。

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

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

.row および .col-xs-4 と同様、この事前定義されたクラスを使用してグリッドをすばやく作成できます。 Bootstrap ソース コードで定義されたミックスインを使用したレイアウト。 セマンティック レイアウトの作成にも使用できます。

「column」のパディング属性を設定して、列の間に余白を作成します。 .row要素に負のマージンを設定することにより これにより、.container 要素に設定されたパディングがオフセットされ、「行」に含まれる「列」のパディングが間接的にオフセットされます。
負の値 以下の例が外側にはみ出しているのはマージンのせいです。グリッド列の内容が並びます。

グリッド システムの列は、1 から 12 までの値を指定することでその範囲を表します。たとえば、3 つの .col-xs-4 を使用して、3 つの等しい幅の列を作成できます。

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

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

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

Vue のカスタム命令を使用してドロップダウン メニューを完成させる方法

HTTP/2 サーバー プッシュについて

nvm がさまざまなバージョンのノードを管理する方法

以上がBootstrap を使用してグリッド システムを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。