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ってナンジャラホイ?ってとこありますがw
 
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とキャッキャして
ちょっとしたのならサクっと作れるようになったりするかな~
 

jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
エムディエヌコーポレーション
売り上げランキング: 12532

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中