TwitterBootstrapを使ってサクっとモックアップ

チョロっとしたUIを持つ画面の実装をする事になりそうで、
あんまりみっともないのもどうかなーと言うことで、
最近よく見かけるTwitterBootstrapを使ってみることにしました。
　
■ ダウンロード、解凍、HTML表示
Twitterは↓でガンガンオープンにイロイロ公開してるわけですが、
http://twitter.github.com/
↓がその中の一つになります。
http://twitter.github.com/bootstrap/
↓こんなヤツ。

　
　早くて楽チンなWeb開発用の、
　小洒落てて直感的でパワフルな
　フロントエンドのフレームワーク。
　
とかって感じでしょうかね。
　
ダウンロードして落ちてきたzipファイルを解凍すると、
↓こんな感じでスタイルシートと画像とJavaScript用のディレクトリ。

$ pwd
/var/www/bootstrap
bootstrap $ ls
css img js

　
上記はApacheのhtdocs配下なわけなんですが、
bootstrapディレクトリの中に一番ミニマムなHTMLを書いて

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    http://code.jquery.com/jquery-latest.js
    http://js/bootstrap.min.js
  </body>
</html>

ブラウザからアクセスすると、HelloWorld出来ましたよ、と。

　
■ サンプルテンプレートを参考に
いくつかサンプルがあって、その中から～って感じなのですが、
なんとなくで Basic marketing site を見て、
Developer Toolsで一個一個追いかけていくような感じで。

　
■ コーディング開始
とりあえず右も左もわがらねぇっぺよぉって話なので、
1行めからひとつひとついきやす。
　
HTML5ではDOCTYPE宣言はW3Cがどうのこうのみたいの書かないで、
シンプルに↓だけです。

<!DOCTYPE html>

で、普通にhtmlタグがあって、headの中を書いていきやす。
　
メタタグ
・キャラクタセットはUTF-8で。

<meta charset=”utf-8″>

・viewport。
　スマホとかの小さいブラウザで見た時に縮小の倍率をホゲホゲとか
　そういう用途で使う感じみたいですね。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

　
リンクタグ
・bootstrapのCSSの読み込み

<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/bootstrap-responsive.css” rel=”stylesheet”>

＃responsiveってナンジャラホイ？ってとこありますがｗ
　
styleタグ
・bodyのパディングの設定

<style type=”text/css”>
　body {
　　padding-top: 60px;
　　padding-bottom: 40px;
　}
</style>

　
ナビゲーションバーとかもコピって要らんとこ消すだけで、、

<!– Navigation –>
<div class=”navbar navbar-inverse navbar-fixed-top”>
　<div class=”navbar-inner”>
　　<div class=”container”>
　　　<a class=”brand” href=”#”>HogeMatching</a>
　　　<div class=”nav-collapse collapse”>
　　　　<ul class=”nav”>
　　　　　<li class=”active”><a href=”#”>Home</a></li>
　　　　　<li><a href=”#about”>About</a></li>
　　　　　<li><a href=”#contact”>Hello! Eiji Shinohara</a></li>
　　　　</ul>
　　　</div><!–/.nav-collapse –>
　　</div>
　</div>
</div>

↓こんな感じ。該当箇所にフォーカスが当たると色変わったり。

　
レイアウトはGrid Systemっていうので、、
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
↓の要領でレイアウトが構成出来るのですが、

　
bootstrap.cssみると↓こんなんなってます。各spanでwidth指定。

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
　width: 940px;
}
.span12 {
　width: 940px;
}
.span11 {
　width: 860px;
}
.span10 {
　width: 780px;
}
.span9 {
　width: 700px;
}
.span8 {
　width: 620px;
}
.span7 {
　width: 540px;
}
.span6 {
　width: 460px;
}
.span5 {
　width: 380px;
}
.span4 {
　width: 300px;
}
.span3 {
　width: 220px;
}
.span2 {
　width: 140px;
}
.span1 {
　width: 60px;
}

　
小洒落たFormも、、

<form class=”well form-inline”>
　<input type=”text” class=”search-query” placeholder=”Hoge ID”>
　<button class=”btn btn-small btn-primary” type=”submit”>Search</button>
</form>

↓角マルとかってのも当たり前な感じなんですねぇ。

　
■ 感想
　
こういうのでサクっとモックアップ作って～って出来るのはナイスだなー。
特に自分はHTML書いてたのは10年前とかで、鬼のTableタグでやってた派なので、
CSSとかあんまり明るくなかったりするので、実際に手動かすと何かと勉強になります。
　
実際にこのモックのアプリ作る事になったら、jQueryとキャッキャして
ちょっとしたのならサクっと作れるようになったりするかな～
　