Bootstrap – 河内・水簾洞

１．特徴

　レスポンシブWebデザインへの対応
　　　ＣＳＳ３のメディアクエリを使用して
　　　ブラウザの横幅サイズを判断し、レイアウトを柔軟に調整する

　グリッドシステムでの構築を目指す
　　　グリッド（grid）は「格子」を意味する
　　　　　グリッド・コンピューティングとは
　　　　　　　ネットワーク上の資源を結びつけ
　　　　　　　多くのコンピュータを並列的に結び付けること
　　　　　WEBデザイン分野ではものを格子状に配置する
　　　　　　　画面上に格子のガイドラインを見立てて、
　　　　　　　それに合わせてコンテンツを配置する

２．ＨＴＭＬの構成

　ＪＱueryとＪＳの部分を忘れずに、この順に組み込む

<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta charset=“utf-8”>
    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Bootstrap Sample</title>
    <!– BootstrapのCSS読み込み –>
    <link href=“css/bootstrap.min.css” rel=“stylesheet”>
    <!– jQuery読み込み –>
    <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
    <!– BootstrapのJS読み込み –>
    <script src=“js/bootstrap.min.js”></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

３．グリッドの考え方

　画面は１２個のグリッドより構成される
　　　コンテナ（Container）・・・内容全体
　　　ロー（Row）・・・・・・・行
　　　カラム（Column）・・・・・列

４．画面サイズと呼称

形態	物理サイズ	prefixの指定方法（*は数値）	表示幅
デスクトップ	1200px以上	col-lg-*	1170px
デスクトップ	992～1199px	col-md-*	970px
タブレット	768px～991px	col-sm-*	750px
スマホ	767px以下	col-xs-*	自動

５．コード見本（横幅の分割単位を指定する）

　横幅に合わせて、表示されるグリッド数を指定する
　　　大きな画面では４カラムで３等分されて表示される
　　　小さな画面では６カラム２個と溢れた１２カラム１個が表示される

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-12 col-lg-4"></div>
    </div>
</div>

６．コード見本（横幅の分割単位を指定する）

　横幅に合わせて、表示されるグリッド数を指定する
　　　大きな画面では８カラムと４カラムの２個が表示される
　　　小さな画面では６カラムが４個で２段、１２カラムが１個表示される

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <div class="col-lg-4"></div>
    </div>
</div>

７．簡略版（分かりやすい事例）

<body>
  <h1>
　<header style="background-color:gray">Header</header>
　<div class="container-fluid">
  　<div class="row">
    <div class="col-sm-2" style="background-color:red;">Red</div>
    <div class="col-sm-8" style="background-color:blue;">Blue</div>
    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
  　</div>
　</div>
　<footer style="background-color:gray">Footer</footer>
　</h1>
</body>

　カラムの合計を１２に揃えるのが原則
　　　カラム数の合計が12より少ない場合・・・単純に左詰め
　　　カラム数の合計が12より大きい場合・・・改行される
　
　大きな画面（ＰＣ等）の場合
　　　header部とfooter部は横に目一杯（１２カラム）広がる
　　　赤色は２カラム、青色は８カラム、黄色は２カラムになる

小さい画面（スマホ等）の場合
　改行されて同じ長さになる