English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。
Bootstrapは、スクリーンやビューポート(viewport)のサイズが増えると、自動的に最大12列。
ウィキペディアからの引用：
平面デザインでは、グリッドは組織するための交差する直線（垂直や水平）で構成された構造（通常は二つの次元）で、印刷デザインのデザインレイアウトやコンテンツ構造に広く使用されます。ウェブデザインでは、一貫したレイアウトを素早く作成し、HTMLとCSSを効果的に使用するための方法です。
簡単に言えば、ウェブページデザインにおけるグリッドは、コンテンツを組織し、ウェブサイトを簡単に browsableにし、ユーザーの負担を軽減するために使用されます。
Bootstrap公式ドキュメントに記載されているグリッドシステムの説明：
Bootstrapには、応答性があり、モバイルデバイス優先で、不固定のグリッドシステムが含まれており、デバイスやビューポートのサイズが増えると適切に拡張されます。 12 列。それは、シンプルなレイアウトオプションのプレデファインドクラスを含み、より多くの意味のあるレイアウトを生成する強力なミックスインクラスも含んでいます。
以下の文を理解してみましょう。Bootstrap 3 モバイルデバイス優先で、この意味では、Bootstrapコードは小さなスクリーンデバイス（例えば、モバイルデバイスやタブレット）から始まり、ノートパソコンやデスクトップなどの大画面デバイスにまで拡張されます。
コンテンツ
最も重要なものを決定します。
レイアウト
より小さい幅に優先してデザインします。
基本的なCSSはモバイルデバイス優先で、メディアクエリはタブレットやデスクトップ用です。
徐々に強化される
スクリーンのサイズが大きくなると、要素が追加されます。
レスポンシブグリッドシステムは、スクリーンやビューポート(viewport)のサイズが増えると、自動的に最大12列。
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
グリッドシステムは、コンテンツを含む行と列のシリーズを通じて、ページレイアウトを作成します。以下は、Bootstrapグリッドシステムがどのように動作するかの説明です：
行は、 .container class内に配置することで、適切なアライメント(alignment)と内側のマージン(padding)を得ることができます。
行を使用して、列の水平なグループを作成します。
コンテンツは列内に配置されなければなりませんし、行はただ一つの列が直接の子要素でなければなりません。
などのプレデファインドのグリッドクラスがあります。 .row および .col-xs-4を使用して、簡単にグリッドレイアウトを作成できます。LESSのミックスインクラスは、より多くの意味のあるレイアウトに使用できます。
列は内側のマージン(padding)を通じて、列内容間のスペースを作成します。この内側のマージンは、 .rows 外側のマージン(margin)が負の値で、最初の列と最後の列の行のオフセットを表します。
グリッドシステムは、横に渡る十二個の利用可能な列を指定することで作成されます。例えば、三つの等しい列を作成するには、三つを使用します。 .col-xs-4。
メディアクエリは非常に独特な「条件付きのCSSルール」です。これは特定の条件に基づく一部のCSSにのみ適用されます。条件が満たされると、対応するスタイルが適用されます。
Bootstrapのメディアクエリは、ビューポートの大きさに基づいて内容を移動、表示、非表示にすることができます。以下のメディアクエリはLESSファイルで使用され、Bootstrapグリッドシステムの重要な分界点の閾値を作成するために使用されます。
/* 超小規模デバイス（スマートフォン， 768px） */ /* Bootstrapではデフォルトでメディアクエリはありません */ /* 小規模デバイスタブレット，768px から） */ @メディア (ミニマム-width: @スクリーン-sm-@メディア (ミニマム /* 中規模デバイス（デスクトップコンピュータ，992px から） */ @メディア (ミニマム-width: @スクリーン-md-@メディア (ミニマム /* 大規模デバイス（大デスクトップコンピュータ，1200px から） */ @メディア (ミニマム-width: @スクリーン-lg-@メディア (ミニマム
メディアクエリのコードには、時々 マックス-widthによって、CSSの影響をより小さなスクリーンサイズの範囲に制限します。
@メディア (マックス-width: @スクリーン-xs-マックス) { ... }
@メディア (ミニマム-width: @スクリーン-sm-ミニマム) および (マックス-width: @スクリーン-sm-マックス) { ... }
@メディア (ミニマム-width: @スクリーン-md-ミニマム) および (マックス-width: @スクリーン-md-マックス) { ... }
@メディア (ミニマム-width: @スクリーン-lg-@メディア (ミニマムメディアクエリには二つの部分があり、まずはデバイスの規範、次にサイズのルールがあります。上記の例では、以下のルールが設定されています：
以下の行のコードを見てみましょう：
@メディア (ミニマム-width: @スクリーン-sm-ミニマム) および (マックス-width: @スクリーン-sm-マックス) { ... }すべての ミニマム-width: @スクリーン-sm-ミニマム のデバイス、スクリーンの幅が @スクリーン-sm-マックスの場合、いくつかの処理が行われます。
以下の表は、Bootstrapグリッドシステムが複数のデバイスでどのように動作するかをまとめています：
| 超小規模デバイススマートフォン（<768px） | 小規模デバイスタブレット（≥768px） | 中規模デバイスデスクトップコンピュータ（≥992px） | 大規模デバイスデスクトップコンピュータ（≥1200px） | |
|---|---|---|---|---|
| グリッドの動作 | 常に水平 | 折り畳み開始で、断点以上は水平 | 折り畳み開始で、断点以上は水平 | 折り畳み開始で、断点以上は水平 |
| 最大コンテナ幅 | なし（オート） | 750px | 970px | 1170px |
| クラス接頭辞 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数と | 12 | 12 | 12 | 12 |
| 最大列幅 | オート | 60px | 78px | 95px |
| ギャップ幅 | 30px （各列の各辺にそれぞれ 15px） | 30px （各列の各辺にそれぞれ 15px） | 30px （各列の各辺にそれぞれ 15px） | 30px （各列の各辺にそれぞれ 15px） |
| ネスト可能 | はい | はい | はい | はい |
| オフセット | はい | はい | はい | はい |
| 列ソート | はい | はい | はい | はい |
以下はBootstrapグリッドの基本的な構造です：
<div> <div> <div></div> <div></div> </div> <div>.../div> </div> <div>....
いくつかのシンプルなグリッドの例を見てみましょう：
以下の例には、4のグリッドがありますが、小さなデバイスでブラウジングしているときにはグリッドの表示位置を特定できません。
この問題を解決するために、使用することができます .clearfix class和 响应式实用工具来解决，如下面示例所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - 响应式的列重置</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>让我们一起坐在这里，祝福我们的爱人。</p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>我为你祈祷，愿你永远幸福我的工作和工作都是偶然的。我只有很小的勇气，我要去实验室实习这是一种后果。 </p> <p>让我们一起坐下来，祝福我们的朋友，祝福他们。 </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>只要有一点点时间，就可以完成实习。 </p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>辛苦和痛苦，充满活力，所以，具有一些伟大的长寿模。 到这些年来。 </p> </div> </div> </div> </body> </html>テストして見て‹/›
浏览器上调整窗口大小查看变化，或在您手机上查看效果。
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列，其中 * 範囲は、 1 から 11。
在下面的示例中，我们有 <div>..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - 偏移列</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div> </body> </html>テストして見て‹/›
以下の結果が表示されます：
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的示例中，布局有两个列，第二列被分为两行四个盒子。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - 嵌套列</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <h4>第一列</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <h4>第二列 - 分为四个盒子</h4> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div> </body> </html>テストして見て‹/›
以下の結果が表示されます：
Bootstrap グリッドシステムのもう一つの完璧な特性は、一つの順序で列を書き、別の順序で表示できることです。
を持ち、簡単に変更できます。 .col-md-push-* および .col-md-pull-* のクラス内蔵のグリッド列の順序から始まります。 * 範囲は、 1 から 11。
以下の例では、两つの列のレイアウトがあります。左列は非常に狭く、サイドバーとして使用されます。以下を使用して .col-md-push-* および .col-md-pull-* クラスを使用して、これら两つの列の順序を入れ替えます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap サンプル - 列ソート</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <p>ソート前</p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> 私は左側 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> 私は右側 </div> </div><br> <div class="row"> <p>ソート後</p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> 私は左側 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444> 私は右側 </div> </div> </div> </body> </html>テストして見て‹/›
以下の結果が表示されます：