ブートストラップがなぜ 12 ラスターなのか

グリッド システムの紹介

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

グリッドシステムは行と列の組み合わせによってページのレイアウトを作成し、作成したレイアウトに設定したコンテンツを配置することができます。

グリッド システムの実装原理

グリッド システムの実装原理は非常にシンプルで、コンテナのサイズを定義するだけです。次に、内側と外側のマージンを調整し、最後にメディア クエリと組み合わせて、強力な応答性の高いグリッド システムを作成します。

グリッド システムの主な動作原理:

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

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

#➣ 特定のコンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になれます。

➣ たくさんあります。組み込みスタイル。.row や .col-xs-4 (4 列幅) などのスタイル (つまり、事前定義されたクラス) を使用して、グリッド レイアウトをすばやく作成できます。ブートストラップ ソース コード内で定義されたミックスインは、次の目的にも使用できます。セマンティック レイアウトを作成します。

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

#➣ ラスター システムの列は、その範囲を表します。たとえば、.col-xs-4 を 3 つ使用すると、等幅の列を 3 つ作成できます。が 12 より大きい場合、余分な「列」が配置されている要素は、全体として別の行に配置されます。

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

Bootstrap は、ページ コンテンツとグリッド システム用の .container コンテナをラップする必要があります。この目的のために 2 つのクラスが用意されています。注、パディングなどの属性のため、これら 2 つのコンテナ クラスは相互にネストできません。

.container クラスは、固定幅でレスポンシブ レイアウトをサポートするコンテナーに使用されます。

#

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

.container -fluid クラスは、幅 100% でビューポート全体を占めるコンテナーに使用されます

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

グリッド システムの使い方

グリッド システムの実際の使い方は、さまざまな列の組み合わせであり、基本的な使い方としては、列の組み合わせ、列のオフセット、列の 4 つの機能があります。ネストと列のソート. 画面サイズが異なると使用するスタイルも異なるため、中画面 (MD) を例として取り上げます はじめに、他の画面の使用法も同様です。

1. 列の組み合わせ

列結合とは、テーブルのcolspanと同様に、数値を変更して列を結合することです。列の組み合わせの実装は簡単で、2 つの CSS プロパティ (left float とpercentage) のみが必要です。

注: グリッド システムを使用する場合、各行のセルの合計数は 12 であることに注意してください。実際のプロジェクトに応じて自由に組み合わせることができます。

        <div class="container">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

関連する推奨事項:「
bootstrap 入門チュートリアル

」

2. 列オフセット

隣接する 2 つの列を隣り合わせたくない場合がありますが、この場合、グリッド システムの列オフセット関数を使用すると、マージン値を定義せずにこれを実現できます。中程度の画面の場合、 .col-md-offset-* 形式のスタイルを使用して列を右にオフセットできます。

たとえば、.col-md-offset-2 は、要素を 2 列幅分右に移動することを意味します。

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

3. 列のネスト

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在  row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

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