第 5 章: BootStrap Grid System_JavaScript スキル

Twitter の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。

学習ポイント:

1. まずモバイルデバイス
2. レイアウトコンテナ
3. グリッドシステム

このレッスンでは主に、応答性の高いモバイルファーストの流動的なグリッド システムを提供する Bootstrap のグリッド システムについて学びます。

1.モバイルファースト

HTML5 プロジェクトでは、モバイル プロジェクトを作成しました。画面とデバイスと同じ幅、ユーザースケーリングを実行するかどうか、およびスケーリング率を設定するために使用される非常に重要なメタがあります。

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 

2.レイアウトコンテナ

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

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

グリッド システムでは、画面サイズの増減に応じて、ブラウザーが最大 12 列を自動的に割り当てます。 一連の行と列を使用してページ レイアウトを作成します。仕組みは次のとおりです:

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

2.「行」を通して横方向に「列」のグループを作成します。

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

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

5. 「column」のパディング属性を設定して、列の間に余白を作成します。 .row 要素

に負の値を設定する したがって、

margin は、.container 要素に設定されたパディングをオフセットし、「行」に含まれる「列」のパディングを間接的にオフセットします。

6. 以下の例が外側にはみ出しているのは、マージンが負の値であるためです。グリッド列の内容が並びます。

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

8. 「行」に 12 個を超える「列」が含まれる場合、余分な「列」の要素はまとめて別の行に配置されます。

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

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div> 

ラスターパラメータテーブル

上の図に示すように、グリッド システムの最外層は 4 つのブラウザ幅を区別します: 超小型画面 (<768px)、小型画面 (>=768px)、中画面 (>=992px)、大画面 (>=1200px)。内部 .container コンテナの適応幅は、自動、750px、970px、1170px です。自動とは、携帯電話の画面を使用している場合、表示の 1 行を占有することを意味します。

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

上記は、BootStrap グリッド システムに関する情報です。皆様のお役に立てれば幸いです。