第 5 章: BootStrap Grid System_JavaScript スキル-jsチュートリアル-php.cn

第 5 章: BootStrap Grid System_JavaScript スキル

WBOY

リリース： 2016-05-16 15:04:03

オリジナル

1225 人が閲覧しました

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 グリッドシステムに関する情報です。皆様のお役に立てれば幸いです。