助けて！Bootstrapが楽しくて仕事が進まない（導入編）

公開日： 2012/11/10 : 最終更新日：2013/08/15 WEBDESIGN

スクリーンショット 2012-11-07 18.15.43
まずはBootstrapを導入して軽くテストしてみます。バージョンは2.2.1でダウンロードは次のURLから。
http://twitter.github.com/bootstrap/

解凍すると css img jsの３つのフォルダが出てきます。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

HTMLソースは最低限のHTML5とします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント
</head>
<body>
</body>
</html>

index.htmlとして以下のフォルダ構成で保存します。
スクリーンショット 2012-11-07 18.25.04
準備ができたので index.html を編集します。

<link href="libs/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="libs/js/bootstrap.min.js">
</head>

最初は全体のレイアウトを試すよ

最初はフィックス（固定レイアウト）。サンプルにしたがい配置してみます。

<div class="container">
TEST
</div>

表示しても普通にTESTと表示されるだけです。どうやら固定幅は940pxでセンタリング。本文は左よりとなっているみたいです。続いて「Fluid layout」もテストしてみましょう。

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
SIDEBAR
</div>
<div class="span10">
BODY
</div>
</div>
</div>

ソースをみると、それぞれの幅を指定している部分は「span2」と「span10」だとわかります。合計12のspanがあり、個々の数値を調整することで比率を買えることが出来るわけですね。バックに色がついていないと、表示させた時にわかりにくいので、オリジナルのCSSファイルを追加してみます。

<link href="libs/css/mystyle.css" rel="stylesheet">

オリジナルの　mystyle.css はこんな感じで書いてみます。

.span5 {
background-color: #CCC;
}
.span6 {
background-color: #CCC;
}
.span7 {
background-color: #FFC;
}

スクリーンショット 2012-11-07 19.27.46
無事に表示されました。試しにソースの「span2」を変えて実験してみましょう。5と7など、合計が12になるようにするのがここでのポイントです。ついでに3と4と5なども実験したらうまく行きました。
ここでブラウザの枠を狭くしてみたところ、グリっとレイアウトが変わらずレスポンシブじゃないことに気が付きました。本家の英文を解読してみると「Enabling responsive features」とあります。標準ではレスポンシブになっていないようです。

レスポンシブじゃなきゃ愛せない

レスポンシブにするには次のコードを書き加える必要があるようです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/css/bootstrap-responsive.css" rel="stylesheet">

ソースのhead部に書き足して実験してみます。注意点として、タグ部はの下に、bootstrap-responsiveはbpptstrap.cssの次に書きます。順番が違うとうまく動かないようです。</p> <pre><title>無題ドキュメント <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="libs/css/bootstrap.min.css" rel="stylesheet"> <link href="libs/css/bootstrap-responsive.css" rel="stylesheet"> <link href="libs/css/mystyle.css" rel="stylesheet"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="libs/js/bootstrap.min.js"></script>

これで問題なく動くようになりました。
スクリーンショット 2012-11-07 19.43.59
次回はもう少し枠の話を続ける予定です。