Bootstrap を使用してグリッドシステムを作成する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2017-12-31 10:15:00

オリジナル

2020 人が閲覧しました

今回お届けするのは 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 サイトの他の関連記事に注目してください。