Bootstrapとは？

Twitter社が提供している、そこそこデザインの良いWebの画面を作成するためのフレームワーク。画面解像度に応じて表示内容を簡単に切り替えて表示でき、レスポンシブ・ウェブ・デザイン(RWD)ととても相性が良いのが特徴。

インストール

・HTMLファイル中にCSSとJavaScriptを読み込む必要がある。
・部品によっては更に読み込むファイルの追加が必要。
・jQueryも必要なので注意する。

ご本尊にあるGetting BootstrapのBasic Templateを使うと良い。

<!DOCTYPE html>
<html lang="en">
  <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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

レスポンシブにHTML要素を配置させるには

レスポンシブに配置させるにはHTML要素にCSSのクラスを指定することで行う。
rowクラスで指定した要素は子要素のために横幅が12区分される。
子要素では12区分のうち幾つ使うかを解像度に応じて設定する。
スマホの解像度では横幅12個(=横幅いっぱい)、タブレットでは6個(=横幅半分)など。
指定のない解像度では小さい解像度用の指定が優先される。(=最小解像度への指示 col-xs-*が全ての基本)
container指定をすると両端が少し空く

画面横幅に応じて指定を切り替える

768px以下(スマホ)	768px以上、992px未満	992px以上、1200px未満	1200px以上
col-xs-*	cos-sm-*	col-md-*	col-lg-*

以下のように書くと、スマホでは２つの要素が横幅いっぱいのものが２段続く。スマホ以外では画面半分で横に並んで表示される。

<div class="row">
    <div class="col-xs-12 col-sm-6">....</div>
    <div class="col-xs-12 col-sm-6">....</div>
</div>

最終的には次のような指定をするイメージになる。

画面横幅に応じて表示しなくする

要素にvisible-xxとhidden-xxクラスを設定する。それぞれ、xxの時だけという限定していなので注意する。

visible-xx	hidden-xx
画面がxxに適合するときだけ表示	画面がxxに適合するときだけ非表示

スマホだけ見せない場合は以下のようになる。

<div class="hidden-xs">
　…
</div>

container

containerを使うと、親要素いっぱいではなく、親要素のサイズから両端に良い感じで隙間を開けてくれる。

<div class="container">
    <div class="row>
        <div class="col-xs-12">...</div>
        ...
    </div>
</div>

（注意）昨今のスマホではデバイスとしての解像度は非常に高解像度を持っているが、ブラウザ上では320☓480など画面のサイズは小さく取得される。代わりに画面密度が高いデバイスになっている。(window.devicePixelRatioが変わってくる)

PHP/Elixirエンジニアのブログ

有益なアウトプットを心がけます。

【CSS】Bootstrapってなに？