プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

グリッド

概要

横幅を940pxで定義し、その幅の感覚を12個のカラムで定義することで、対応する


グリッド

行をclsaa="row"で定義、カラムをclass="span1"～"span12"で定義する

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>グリッドテスト０１</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row">
      <div class="span12" style="background-color: #FF0000;">
        940pxのサイズを12カラムで分割して管理
      </div>
    </div>
    <div class="row">
      <div class="span3" style="background-color: #FFFF00;">
        3カラム
      </div>
      <div class="span3" style="background-color: #FF00FF;">
        3カラム
      </div>
      <div class="span3" style="background-color: #FFFF00;">
        3カラム
      </div>
      <div class="span3" style="background-color: #00FFFF;">
        3カラム
      </div>
    </div>
    <div class="row">
      <div class="span1" style="background-color: #FF0000;">
        1カラム
      </div>
      <div class="span11" style="background-color: #0000FF;">
        11カラム
      </div>
    </div>
    <div class="row">
      <div class="span6" style="background-color: #FF00FF;">
        6カラム
      </div>
      <div class="span6" style="background-color: #CC00FF;">
        6カラム
      </div>
    </div>
    <div class="row">
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #0000FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #AA00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #CC00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FFFF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #CCFFFF;">
        1カラム
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 


可変グリッド

行をclsaa="row-fluid"と変更すると比率で対応するようになる

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>グリッドテスト０２</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row-fluid">
      <div class="span12" style="background-color: #FF0000;">
        940pxのサイズを12カラムで分割して管理
      </div>
    </div>
    <div class="row-fluid">
      <div class="span3" style="background-color: #FFFF00;">
        3カラム
      </div>
      <div class="span3" style="background-color: #FF00FF;">
        3カラム
      </div>
      <div class="span3" style="background-color: #FFFF00;">
        3カラム
      </div>
      <div class="span3" style="background-color: #00FFFF;">
        3カラム
      </div>
    </div>
    <div class="row-fluid">
      <div class="span1" style="background-color: #FF0000;">
        1カラム
      </div>
      <div class="span11" style="background-color: #0000FF;">
        11カラム
      </div>
    </div>
    <div class="row-fluid">
      <div class="span6" style="background-color: #FF00FF;">
        6カラム
      </div>
      <div class="span6" style="background-color: #CC00FF;">
        6カラム
      </div>
    </div>
    <div class="row-fluid">
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #0000FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #AA00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #CC00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FFFF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #CCFFFF;">
        1カラム
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

オフセットカラム

カラムにoffsetXXを定義することで指定数のカラムを空けることができる

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>グリッドテスト０３</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row">
      <div class="span12" style="background-color: #FF0000;">
        940pxのサイズを12カラムで分割して管理
      </div>
    </div>
    <div class="row">
      <div class="span3" style="background-color: #FFFF00;">
        3カラム
      </div>
      <div class="span3 offset3" style="background-color: #FF00FF;">
        3カラム offset3
      </div>
      <div class="span3" style="background-color: #00FFFF;">
        3カラム
      </div>
    </div>
    <div class="row">
      <div class="span1" style="background-color: #FF0000;">
        1カラム
      </div>
      <div class="span6 offset5" style="background-color: #0000FF;">
        6カラム offset5
      </div>
    </div>
    <div class="row">
      <div class="span2 offset5" style="background-color: #FF00FF;">
        2カラム offset5
      </div>
      <div class="span5" style="background-color: #CC00FF;">
        5カラム
      </div>
    </div>
    <div class="row">
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #0000FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #0000FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FF00FF;">
        1カラム
      </div>
      <div class="span1" style="background-color: #FFFF00;">
        1カラム
      </div>
      <div class="span1" style="background-color: #00FF00;">
        1カラム
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

入れ子

段組みの中にさらに段組みを追加して対応

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>グリッドテスト０４</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row">
      <div class="span12" style="background-color: #FF0000;">
        940pxのサイズを12カラムで分割して管理
        <div class="row">
          <div class="span3" style="background-color: #FFFF00;">
              ああああ
          </div>
          <div class="span9" style="background-color: #FF00FF;">
              いいいい
              <div class="row">
                <div class="span5" style="background-color: #0000FF;">
                    １１１１
                    <div class="row">
                        <div class="span1" style="background-color: #CCCCCC;">
                            aaaa
                        </div>
                        <div class="span1" style="background-color: #CCCCCC;">
                            bbbb
                        </div>
                        <div class="span1" style="background-color: #CCCCCC;">
                            cccc
                        </div>
                        <div class="span1" style="background-color: #CCCCCC;">
                            dddd
                        </div>
                        <div class="span1" style="background-color: #CCCCCC;">
                            eeee
                        </div>
                    </div>
                </div>
                <div class="span4" style="background-color: #00FFFF;">
                    ２２２２
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 



「グリッド」をウィキ内検索
最終更新：2013年06月07日 00:42