Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その10 グリッドシステム

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その9 パネルとWells

今回はグリッドシステムについて調べてみます。

こちらを参考にしました。
http://getbootstrap.com/css/



Grid system



Bootstrapのレイアウトの基本は、このグリッドシステムみたいです。

これは、行を「12」に分割し、任意の数で結合。
その中にレイアウトしていく感じになります。

あまりcssによるレイアウトに詳しくないプログラマーだと、
tableタグとrowspan、colspanを駆使してレイアウトしているのでは?
それと似たような感覚で配置できると思います。

ルールは

・クラスに「container」を指定したdivを用意。
・その中にクラス「row」を定義したdivを入れ子にする。
・rowの中に更にcol-[サイズ]-[カラム数]というクラスを指定したdivを入れる。



カラム数は1から12です。
サイズは、その画面サイズ以上だったらグリッドレイアウトを採用する。
それ以下になったら、通常のdivと同じく縦に並べて表示するという
しきい値を指定する模様。


モバイル(768px以下):エクストラスモール=xs
タブレット(768px以上、992px未満):スモール=sm
デスクトップ(992px以上、1200px未満):ミディアム=md
デスクトップ(1200px以上):ラージ=lg




モバイルで見ることないよ。
管理用のWebツールをこじゃれた画面で作りたいんだよという場合は、
何も考えず「xs」を指定しておけば良いかと思います。


とりあえずのサンプルはこんなかんじです。

443_01.png


セル上になったdivの中に表示したいものを入れれば良いわけです。


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap</title>
  7.     <!-- Bootstrap -->
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  9.     <!-- デバッグ用に罫線表示 -->
  10.     <style type="text/css">
  11.      div {
  12.         border: 1px solid #d3d3d3;
  13.      }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.      <div class="row">
  19.         <div class="col-xs-1">.col-xs-1</div>
  20.         <div class="col-xs-1">.col-xs-1</div>
  21.         <div class="col-xs-1">.col-xs-1</div>
  22.         <div class="col-xs-1">.col-xs-1</div>
  23.         <div class="col-xs-1">.col-xs-1</div>
  24.         <div class="col-xs-1">.col-xs-1</div>
  25.         <div class="col-xs-1">.col-xs-1</div>
  26.         <div class="col-xs-1">.col-xs-1</div>
  27.         <div class="col-xs-1">.col-xs-1</div>
  28.         <div class="col-xs-1">.col-xs-1</div>
  29.         <div class="col-xs-1">.col-xs-1</div>
  30.         <div class="col-xs-1">.col-xs-1</div>
  31.      </div>
  32.      <div class="row">
  33.         <div class="col-xs-8">.col-xs-8</div>
  34.         <div class="col-xs-4">.col-xs-4</div>
  35.      </div>
  36.      <div class="row">
  37.         <div class="col-xs-4">.col-xs-4</div>
  38.         <div class="col-xs-4">.col-xs-4</div>
  39.         <div class="col-xs-4">.col-xs-4</div>
  40.      </div>
  41.      <div class="row">
  42.         <div class="col-xs-6">.col-xs-6</div>
  43.         <div class="col-xs-6">.col-xs-6</div>
  44.      </div>
  45.     </div>
  46.     
  47.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  48.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  49. </body>
  50. </html>







カラム数が12を超えた時のルール



一行のカラム数は12固定です。
では、rowに足すと12を超えるcolを指定した場合は?

443_02.png

12を超えたcolが折り返して次の行に表示されます。


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap</title>
  7.     <!-- Bootstrap -->
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  9.     <!-- デバッグ用に罫線表示 -->
  10.     <style type="text/css">
  11.      div {
  12.         border: 1px solid #d3d3d3;
  13.      }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.      <div class="row">
  19.         <div class="col-xs-1">1</div>
  20.         <div class="col-xs-1">1</div>
  21.         <div class="col-xs-1">1</div>
  22.         <div class="col-xs-1">1</div>
  23.         <div class="col-xs-1">1</div>
  24.         <div class="col-xs-1">1</div>
  25.         <div class="col-xs-1">1</div>
  26.         <div class="col-xs-1">1</div>
  27.         <div class="col-xs-1">1</div>
  28.         <div class="col-xs-1">1</div>
  29.         <div class="col-xs-1">1</div>
  30.         <div class="col-xs-1">1</div>
  31.      </div>
  32.      <div class="row">
  33.         <div class="col-xs-9">9</div>
  34.         <div class="col-xs-4">4</div>
  35.         <div class="col-xs-6">6</div>
  36.      </div>
  37.     </div>
  38.     
  39.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  40.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  41. </body>
  42. </html>







隙間を開けたい



隙間を開けて配置したい場合、「col-[サイズ]-offset-[カラム数]」を指定します。
これで複雑なレイアウトも対応できそうです。

443_03.png


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap</title>
  7.     <!-- Bootstrap -->
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  9.     <!-- デバッグ用に罫線表示 -->
  10.     <style type="text/css">
  11.      div {
  12.         border: 1px solid #d3d3d3;
  13.      }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.      <div class="row">
  19.         <div class="col-xs-1">1</div>
  20.         <div class="col-xs-1">1</div>
  21.         <div class="col-xs-1">1</div>
  22.         <div class="col-xs-1">1</div>
  23.         <div class="col-xs-1">1</div>
  24.         <div class="col-xs-1">1</div>
  25.         <div class="col-xs-1">1</div>
  26.         <div class="col-xs-1">1</div>
  27.         <div class="col-xs-1">1</div>
  28.         <div class="col-xs-1">1</div>
  29.         <div class="col-xs-1">1</div>
  30.         <div class="col-xs-1">1</div>
  31.      </div>
  32.      <div class="row">
  33.         <div class="col-xs-4">4</div>
  34.         <div class="col-xs-4 col-xs-offset-4">4 offset 4</div>
  35.      </div>
  36.      <div class="row">
  37.         <div class="col-xs-3 col-xs-offset-3">3 offset 3</div>
  38.         <div class="col-xs-3 col-xs-offset-3">3 offset 3</div>
  39.      </div>
  40.      <div class="row">
  41.         <div class="col-xs-6 col-xs-offset-3">6 offset 3</div>
  42.      </div>
  43.     </div>
  44.     
  45.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  46.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  47. </body>
  48. </html>








カラムのネスト



colの中に更にrowを指定して分割することができます。
ネスト内部も更にcolが12分割されます。これは便利。

443_04.png


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap</title>
  7.     <!-- Bootstrap -->
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  9.     <!-- デバッグ用に罫線表示 -->
  10.     <style type="text/css">
  11.      div {
  12.         border: 1px solid #d3d3d3;
  13.      }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.      <div class="row">
  19.         <div class="col-xs-12">12</div>
  20.         <div class="col-xs-10">
  21.          <div class="row">
  22.             <div class="col-xs-12">12</div>
  23.          </div>
  24.          <div class="row">
  25.             <div class="col-xs-10">10</div>
  26.             <div class="col-xs-2">2</div>
  27.          </div>
  28.         </div>
  29.      </div>
  30.     </div>
  31.     
  32.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  33.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  34. </body>
  35. </html>

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/03(日) 21:46:33|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その11 サイドメニュー | ホーム | プログラマのためのBootstrap入門 その9 パネルとWells>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1456-731546c5
この記事にトラックバックする(FC2ブログユーザー)