Twitter Bootstrap3をさくっと使ってみました。

This post is also available in: English-US (英語)

Twitter Bootstrapを使うと、爆速でレスポンシブなwebデザインができると聞いたので試しに使ってみました。
利用したのは[周辺の飲食店のスポットを検索できるWebアプリを公開しました|ワタシハドコ？-周辺飲食店検索]の記事に書いてある、ぐるなびAPIと位置情報を使った簡単な周辺飲食店を検索するサイトです。

Contents

1 Bootstrap3でカスタマイズした手順
2 Bootstrap3でカスタマイズする前のHTMLコード
3 Bootstrap3でカスタマイズしたあとのHTMLコード

Bootstrap3でカスタマイズした手順

1.Twitter Bootstrap3のダウンロード

Twitter Bootstrap3(http://getbootstrap.com/getting-started/)をダウンロード。
ダウンロードしたフォルダを解凍し、フォルダ名を[bootstrap]にリネームして利用するサイトのフォルダにコピーする。

2.Basic templateから必要なコードのコピー

カスタマイズの前準備で、[Basic template]からメタタグとjavascript系のコードをコピペします。
ちなみに、ページ内の指定文字列を検索する時には[Ctrl + F](MACの場合は Command + F)を使うと便利です。

3.ExamplesのBootstrap themeメインにカスタム

Bootstrap3はテンプレートというよりかは、Examplesのサンプルの中から必要なパーツを取り出して使ってね...みたいな使い方をする印象を受けました。
なので、[ExamplesのBootstrap theme]をサンプルとしてカスタマイズする事としました。

4.Bootstrap themeのパーツを見ながら使いたいパーツの選別

Bootstrap themeのデザインを眺めつつ、このパーツは使えそうという部分のHTMLソースコード(右クリック > ページのソースを表示)を見よう見真似で自分のサイトのHTMLコードにコピペしていきます。

[Fixed navbar]は使わないので飛ばして、[Main jumbotron for a primary marketing message or call to action]以下を使いました。

また下記のような部分も、グリッドデザイン表示するための部分なので今回はパスしました。

<div class="row"><div class="col-sm-4">

5.ボタンのデザイン

まずはお手軽なので、ボタンのデザインからはじめました。
非常に簡単で、inputの部分に class="btn btn-primary" みたいなコードを追加するだけです。

ボタンのデザインに関しては、[4.Bootstrap themeのパーツを見ながら使いたいパーツの選別]で選んだデザインとなります。

6.Bootstrap themeのPanelsでデザイン

デザインが綺麗なので、Bootstrap themeの中のPanelsをメインにデザインすることにしました。具体的には以下の部分を当てはめただけです。

<div class="panel panel-default">
	<div class="panel-heading">
	<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body">
	Panel content
	</div>
</div>

こんな感じで、大枠のレスポンシブデザインは簡単にデザインすることができました。
その他、デザインをちょこっとカスタマイズしたいなという場合にはComponents(http://getbootstrap.com/components/)のページにカスタマイズ例のコードが公開されています。

Bootstrap3でカスタマイズする前のHTMLコード

Bootstrapを使ったことが分かりやすいように、CSSの記述(id,class,style)などが全くない状態からカスタマイズをはじめました。

web_bootstrap_before

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>ワタシハドコ？-周辺飲食店検索</title>
</head>
<body>
    <header>
    <h1>ワタシハドコ？-周辺飲食店検索</h1>
    </header>
    <section>
        <p>
        注意書きなどを書く<br />
        ・現在地の座標は自動で追加されます。
        </p>
    </section>
    <section>
    <h2>現在地の座標から周辺の飲食店を探す</h2>
    <form name="present_location" action="/index.php" method="post">
    <p>
    緯度：<input type="text" name="present_lat" size="5" value="" /> 経度：<input type="text" name="present_lon" size="5" value="" />
    </p>
	<p>
    <input type="button" onclick="chkAll_name(true)" value="全選択" />
    <input type="button" onclick="chkAll_name(false)" value="全解除" />
    </p>
    <p>
    <!-- チェックボックスが並んでいる部分。長いので省略しています。 -->
	</p>
	<p>   
    <input type="submit" value="現在地から探す" />
    </p>
    </form>
    </section>
    <section>
    	<!-- ここは[現在地から探す]ボタンを押した結果の表示部分。今回は無視してください。 -->
    </section>
	<footer>
	<p>&copy; Amelt.net,LLC.</p>
	</footer>
</body>
</html>

Bootstrap3でカスタマイズしたあとのHTMLコード

カスタマイズした内容は[2.Bootstrap3でカスタマイズする前のHTMLコード]との差分のみです。
divの閉じタグに、対応するCSS部分をコメントアウトで書いているので参考にしてみてください。

web_bootstrap_after

<!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">
    <!-- bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <title>ワタシハドコ？-周辺飲食店検索</title>
</head>
<body>
<div class="container theme-showcase" role="main">
<div class="jumbotron">
    <header>
    <h1>ワタシハドコ？-周辺飲食店検索</h1>
    </header>
    <section>
        <p>
        注意書きなどを書く<br />
        ・現在地の座標は自動で追加されます。
        </p>
    </section>
</div><!-- div class="jumbotron" -->
<section>
    <div class="page-header">
        <div class="panel panel-success">
		    <div class="panel-heading">
        	<h3 class="panel-title">現在地の座標から周辺の飲食店を探す</h3>
		    </div><!-- div class="panel-heading" -->
        <div class="panel-body">
        <form name="present_location" action="/index.php" method="post">
        <p>
        緯度：<input type="text" name="present_lat" size="5" value="" /> 経度：<input type="text" name="present_lon" size="5" value="" />
        </p>
        <p>
        <input type="button" class="btn btn-primary" onclick="chkAll_name(true)" value="全選択" />
        <input type="button" class="btn btn-default" onclick="chkAll_name(false)" value="全解除" />
        </p>
        <p>
        <!-- チェックボックスが並んでいる部分。長いので省略しています。 -->
		</p>
        <input type="submit" class="btn btn-lg btn-success" value="現在地から探す" />
        </p>
        </form>
        </div><!-- div class="panel-body" -->
    	</div><!-- div class="panel panel-default" -->
    </section>
    <section>
	    <!-- ここは[現在地から探す]ボタンを押した結果の表示部分。今回は無視してください。 -->
    </section>
    </div><!-- div class="page-header" -->
    <div class="well">
        <footer>
          <p>&copy; Amelt.net,LLC.</p>
        </footer>
    </div><!-- div class="well" -->
</div><!-- div class="container theme-showcase" role="main" -->
<!-- js -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Twitter Bootstrapのおすすめの本。
UIまで手の回らないプログラマのためのBootstrap 3実用ガイド