Bootstrap入門書(3) グリッドシステム_JavaScriptスキル

実装原理

グリッド システムは Bootstrap の核心であり、Bootstrap がこのような強力な応答性の高いレイアウト ソリューションを実現できるのはまさにグリッド システムの存在です。以下は公式ドキュメントの説明です:

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

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

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

次の戦略があります:

内容: 何が最も重要かを決めます。
レイアウト: 幅が小さいことを優先します。
プログレッシブ・エンハンスメント: 画面サイズが大きくなるにつれて要素が追加されます。

仕組み

適切な配置とパディングを行うには、データ行 (.row) がコンテナー .container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります。例:

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

データ行 (.row) に列を追加できますが、列数の合計が二等分された列の合計数を超えることはできません (超過した場合、超過分は新しい行に表示されます)。デフォルトは次のとおりです。 12. (カスタマイズされた設定は Less または Sass を使用して行うことができます):

<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6"></div>
<div class="col-md-4"></div>

ページ上の特定のコンテンツは列 (column) 内に配置する必要があり、列 (column) のみがデータ行 .row コンテナーの直接の子要素として使用できます。

.row や .col-xs-4 などの事前定義されたグリッド クラスを使用して、グリッド レイアウトをすばやく作成できます。

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

注:

上のコメント欄にもあるように、.container(固定幅)は固定幅のレイアウト方法です。ソース コードを見ると、.container クラスを見ると、その幅がレスポンシブであることがわかります: (次のように)

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*........*/

上記の CSS コードからわかるように、このクラスのデフォルトは親要素全体 (最小画面) の幅ですが、大きな画面では幅が異なり、左右のマージンは画面に合わせて増減します。同時に異なる幅（水平方向）中央）の下で。

.container-fluid クラスはデフォルトでは .container と同じで、幅は 100% です。 (CSSコードは同じです)

そのほか

ソース コードから、左右のマージンに加えて、このクラスには左右のパディングがあることもわかります。

ソース コードの表示を続けると、次のように、データ行 .row の各列にも左右のパディングがあることがわかります。

.col-md-1, .col-lg-12 /*......*/{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

これを見れば、どんな状況が起こるか誰もが想像できるはずです！最初と最後の列に二重パディングが存在するため、コンテンツの分離は実際には 30 ピクセルに達しています。影響を排除するにはどうすればよいでしょうか?

ブートストラップは、.rows で負の margin-left: -15px;margin-right: -15px; を使用して、最初と最後の列の行オフセットを表し、最初の列の左パディングをオフセットするために使用されます。最後の列の右パディング。

基本的な使い方

bootstrap3.x では、以下に示すように 4 つのグリッド オプションが公式 Web サイトで紹介されていますが、ここでは 4 つのグリッド オプションの違いについて詳しく説明します。実際、唯一の違いは、さまざまなサイズの画面デバイスに適していることです。クラス接頭辞を見てみましょう。これらの 4 つのグリッド オプションには、col-xs、col-sm、col-md、col-lg という略語が付いていることがわかります。 mdはmid、smはsmall、xsは***の略です。この名前は、これらのクラスが適応するさまざまな画面幅を反映しています。以下にそれぞれのクラスの特徴を紹介します。

以下の表を使用して、Bootstrap のグリッド システムがさまざまな画面デバイスでどのように動作するかを詳しく確認します。

これは、次のようにソース コードから見つけることができます。

.col-md-1/*......*/{ float: left;}/*所有的列都是默认向左浮动的*/
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
/*.....*/
.col-md-12 {
width: 100%;
}

これらの CSS コードから、Bootstrap の各列の幅と、列数が 12 を超えるように設定されている場合に超過部分が新しい行で表示される理由を知ることは難しくありません。

以下のすべての例では、各列の背景色と境界線の効果は次の CSS コードによって制御されます:

[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}

基础

那么我们就来看看一些示例吧，下面这种方式是最基本的用法：

<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</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-2">.col-md-2</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>

实现的效果如下：

 

Bootstrap作为一个响应式框架当然不会只有那么简单的功能，我们继续往下走吧！

列偏移

在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。

只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 )，那么具有这个类名的列就会向右偏移。

这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列（column）的宽度。

现在我们的代码是这样的：

<div class="container">
<div class="row">
<div class="col-md-2 ">col-md-8 </div>
<div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div>
<div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
</div>
<p><br></p>
<div class="row">
<div class="col-md-4 ">col-md-4 </div>
<div class="col-md-3 col-md-offset-4">col-md-3 col-md-offset-4</div>
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
</div>
</div>

可以实现的效果如下：

 

从实现的效果我们就能发现一些东西，注意 第二段的显示效果与代码 ，从那里我们可以发现：使用 col-md-offset-* 对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。

其实原因也很简单：因为该类是对于列设置 margin-left ，并且我们在上面的源码展示中，也可以看有每一列都有着 float:left 的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了

列排序

列排序其实就是改变列的方向（顺序），就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样，星号代表移动的列组合数)。

Bootstrap仅通过设置left和right来实现定位效果。通过查看源码，我们可以看到基本设置比较简单，如下：

.col-md-pull-12 {
right: 100%;
}
/*...*/
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}

还是继续看看我们的实际效果吧！代码如下

<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4 col-md-push-8 </div>
<div class="col-md-8 col-md-pull-4">.col-md-8 col-md-pull-4 </div>
</div>
<div class="row">
<div class="col-md-4 ">.col-md-4 默认</div>
<div class="col-md-8 ">.col-md-8 默认</div>
</div>
</div>

 

我们可以发现列的位置已经发生了改变

列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ .row ）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（ .row ），宽度为100%时，就是当前外部列的宽度。（其实就是在列中嵌套多个列，下面会有实际效果展示）

注意：被嵌套的行（ .row ）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列 -_- ）。

我们现在有这样一个需求：

创建一个8-4列网格。（备注：以中屏md（970px）为例）。
在第一个8列网格中插入8-4列网格。
在第二个4列网格中插入9-3列网格。

效果如下：

 

该如何实现呢？

<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<div class="col-md-4">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">col-md-9</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
</div>
</div>

是不是很简单呢？当然为了完全实现和效果图一样的展示，我们还需要对CSS进行一些添加：

[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}

以上所述是小编给大家分享的Bootstrap入门书籍之（三）栅格系统，希望对大家有所帮助！