ブートストラップグリッドシステム
この章では、Bootstrap のグリッド システムについて説明します。
Bootstrap は、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割される、応答性の高いモバイルファーストの流体グリッド システムを提供します。
グリッドとは何ですか?
Wikipediaからの抜粋:
グラフィック デザインにおいて、グリッドは、コンテンツを整理するために使用される一連の交差する直線 (垂直、水平) で構成される構造 (通常は 2 次元) です。印刷デザインにおけるデザインレイアウトやコンテンツ構造に広く使用されています。 Web デザインにおいて、一貫したレイアウトを迅速に作成し、HTML と CSS を効果的に使用するための方法です。
簡単に言えば、Web デザインにおけるグリッドは、コンテンツを整理し、Web サイトをナビゲートしやすくし、ユーザー側の負荷を軽減するために使用されます。
ブートストラップグリッドシステムとは何ですか?
公式 Bootstrap ドキュメントのグリッド システムの説明:
Bootstrap には、デバイスまたはビューポートのサイズが 12 列増加するのに応じて適切にスケールする、応答性の高いモバイルファーストの流動的なグリッド システムが含まれています。これには、単純なレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。
上記の文を理解しましょう。 Bootstrap 3 は、Bootstrap コードが小さな画面デバイス (例: モバイル、タブレット) 上のコンポーネントとグリッドから始まり、その後、大画面デバイス (例: ラップトップ、デスクトップ) 上のコンポーネントとグリッドに拡張されるという意味で、モバイルファーストです。
モバイルファースト戦略
コンテンツ
何が最も重要かを決定します。
レイアウト
幅が狭いデザインを優先します。
基本的な CSS はモバイルファーストであり、メディア クエリはタブレットとデスクトップ コンピューター用です。
プログレッシブエンハンスメント
画面サイズが大きくなるにつれて要素を追加します。
レスポンシブグリッドシステム 画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
ブートストラップ グリッド システムの仕組み
グリッド システムは、コンテンツを含む一連の行と列を通じてページ レイアウトを作成します。 Bootstrap グリッド システムがどのように機能するかは次のとおりです。適切な配置とパディングを得るには、
行を .container クラス内に配置する必要があります。
行を使用して、水平方向の列のグループを作成します。
コンテンツは列内に配置する必要があり、行の直接の子要素にできるのは列のみです。
事前定義されたグリッド クラス (.row や .col-xs-4 など) を使用して、グリッド レイアウトをすばやく作成できます。よりセマンティックなレイアウトには、LESS mixin クラスを使用できます。
列はパディングを使用して列の内容の間にギャップを作成します。パディングは、最初と最後の列の行オフセットを表す .rows のマージンによって負の値になります。
グリッド システムは、分割する 12 個の使用可能な列を指定することによって作成されます。たとえば、3 つの等しい列を作成するには、3 つの .col-xs-4 を使用します。
メディアクエリ
メディアクエリは非常に派手な「条件付きCSSルール」です。特定の指定された条件に基づいて一部の CSS でのみ機能します。これらの条件が満たされる場合、対応するスタイルが適用されます。
Bootstrap のメディア クエリを使用すると、ビューポート サイズに基づいてコンテンツを移動、表示、非表示にすることができます。次のメディア クエリは、ブートストラップ グリッド システムで主要なブレークポイントしきい値を作成するために LESS ファイルで使用されます。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }CSS の影響をより狭い範囲の画面サイズに制限するために、メディア クエリ コードに max-width を含めることもあります。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }メディア クエリには 2 つの部分があり、最初はデバイス仕様、次にサイズ ルールです。上記の場合、次のルールが設定されています:
次のコード行を見てみましょう:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }min-width を持つすべてのデバイス: @screen-sm-min、画面の幅がこれより小さい場合@screen-sm-maxより、何らかの処理が行われます。
グリッド オプション
以下の表は、Bootstrap グリッド システムが複数のデバイス間でどのように動作するかをまとめたものです:
| 超小型デバイスのモバイル (<768px) | 小型デバイスのタブレット (≥768px) | 中型デバイスのデスクトップ (≥992px) | 大型デバイスのデスクトップ (≥1200px) | |
|---|---|---|---|---|
| グリッドの動作 | は常に水平です | 折り目で開始、ブレークポイントの上で水平 | 折り目で開始、ブレークポイントの上で水平 | 折り目で開始、ブレークポイントの上で水平 |
| コンテナの最大幅 | なし(自動) | 750px | 970px | 1170px |
| クラスプレフィックス | .col-xs- | .col-sm- | .col-md- | .col-lg - |
| 番号列数と | 12 | 12 | 12 | 12 |
| 最大列幅 | Auto | 60px | 78px | 95px |
| ギャップ幅 | 30px (両側に15px) 1 列) | 30px (1 列の両側に 15 ピクセル) | 30px (1 列の両側に 15 ピクセル) | 30px (1 列の両側にそれぞれ 15 ピクセル) |
| ネスト可能 | はい | はい | はい | はい |
| オフセット | はい | はい | はい | はい |
| 列の並べ替え | はい | はい | はい | はい |
基本的なグリッド構造
Bootstrap グリッドの基本構造は次のとおりです:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
簡単なグリッドの例をいくつか見てみましょう:
例: 積み重ねられたレベル
例: 中型および大型デバイス
例: 携帯電話、タブレット、デスクトップ
レスポンシブ列リセット
次の例には 4 つのグリッドが含まれていますが、小型デバイスで閲覧する場合はグリッド表示の位置を決定できません。
この問題を解決するには、次の例に示すように、.clearfix クラスとリアクティブ ユーティリティを使用できます。
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的列重置</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </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>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </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>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> </body> </html>
Run Instance»
[Run Instance] ボタンをクリックします。オンラインの例を見てみましょう
ブラウザのウィンドウのサイズを変更して変更を確認するか、携帯電話での効果を確認してください。
列のオフセット
オフセットは、よりプロフェッショナルなレイアウトに便利な機能です。列のためのスペースを増やすために使用できます。たとえば、.col-xs=* クラスはオフセットをサポートしていませんが、空のセルを使用するだけで効果を実現できます。
大画面ディスプレイでオフセットを使用するには、.col-md-offset-* クラスを使用します。これらのクラスは、列の左マージンを * 列分増やします。ここで、* の範囲は 1 から 11 までです。
以下の例では、<div class="col-md-6">..</div> があり、この div を中央に配置するために .col-md-offset-3 クラスを使用します。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 偏移列</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-xs-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 列すべてを占有する必要はありません)。
以下の例では、レイアウトに 2 つの列があり、2 番目の列は 4 つのボックスの 2 行に分割されています。 Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 嵌套列</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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 グリッド システムのもう 1 つの優れた機能は、ある順序で列を簡単に記述し、別の順序で列を表示できることです。
組み込みグリッド列の順序は、.col-md-push-* クラスと .col-md-pull-* クラスを使用して簡単に変更できます。ここで、* の範囲は 1 11 までです。
以下の例では 2 列のレイアウトがあり、左側の狭い列がサイドバーとして機能します。 .col-md-push-* クラスと .col-md-pull-* クラスを使用して、これら 2 つの列の順序を入れ替えます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 实例 - 列排序</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
