twitter bootstrap

twitter bootstrapを使い始めるときに、最小限の使い方。

（以下は、twitter bootstrap V2.0を前提にしている。解説するのは、とりあえず、railsのscaffoldの表示をかっこ良く置き換えるの必要な機能だけの覚書）

使い方。

１，twitter bootstrapを公式サイト>からダウンロードしておく。
２，htmlファイルのヘッダに以下のソースを組み込む。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>sapmle for twitter bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>

bootstrapを解凍すると入っているCSSファイルには、bootstrap.min.css, bootstrap.css, bootstrap-responsive.min.css, bootstrap-responsive.cssの4種類がある。minとついているのは、小さいファイル。ただし、機能の違いはない。minと付いている方を使おう。responsiveとついていないものだけでも最低限の機能はあるが、responsiveとついているものも一緒に読み込むことで、ブラウザの幅に応じて適当に対応してくれる。とりあえずの簡単スマホ対応になるので、使っておこう。

３，bodyの一番下に、以下のソースを入れておく。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script src="js/bootstrap.min.js"></script>
</body>
</html>

bootstrap.min.jsは、このCSSで必要なJavascriptファイル。こいつの動作は、jqueryに依存しているので、jqueryも一緒に読み込んでおく。1.7.1は、この項目を書いた時点での最新版。

４，レイアウトは、containerを使う。
これだけで、それなりに綺麗なレイアウトにしてくれる。グリッドとかは、あとで適当に。

この中に、コンテンツをかく。

５，formをつかう。
formは、ただ書くだけで、それなりに綺麗にしてくれる。ただし、ボタンだけは、class="btn"とつけること。

<form>
<label>名前</label><input type="text" name="name" class="span3">
<input type="submit" value="送信" class="btn">
</form>

６，pagination
paginationはこんな感じ。

• 前へ
• 1
• 2
• 3
• 次へ

７，ナビゲーションバー
これは、カッコイイので使うといいと思う。twitterとかgoogleとかみたいな、黒いナビゲーションバー。
使うときには、bodyタグに、paddingをつけておくこと。ナビゲーションバーと、その他のコンテンツが重なって見えてしまう。

<body style="padding-top:60px">

サイト名

• Home
• 何か
• あれ
• それ
• ヘルプ

８，他の機能は、公式サイトを見ながら、適当に使う。