twitter bootstrap

0pt

twitter bootstrapを使い始めるときに、覚えておくべき最小限の使い方。

（以下は、twitter bootstrap V2.0を前提にしている。解説するのは、とりあえず、railsのscaffoldの表示をかっこ良く置き換えるの必要な機能だけの覚書。また、下記は、特にフレームワーク等を使っていない場合の方法。なんらかのフレームワークを使っている場合は、もっと使いやすい方法が用意されていることが多い。一応、rails3の場合については、各項目ごとに記した。twitter-bootstrap-railsも参照のこと。）

使い方。

１，twitter bootstrapを公式サイトからダウンロードしておく(rails3の場合、twitter-bootstrap-railsとかみたいなgemを使うほうが楽だと思う)。
２，htmlファイルのヘッダに以下のソースを組み込む。(rails3で、なんらかのgemを使ってインストールした場合、asset pipelineが勝手にうまく計らってくれるので、このステップと次のステップは不要)

<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の一番下に、以下のソースを入れておく。（上で書いたように、rails3の場合、これはしなくていい。）

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

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

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

<div class="container">
この中に、コンテンツをかく。
</div>

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

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

６，pagination
paginationはこんな感じ（このステップで書いているpaginationのhtmlは、railsでwill_paginateを使ってpaginationをした場合、作るのが面倒くさい。will_paginateを使うなら、この項目は無視するのも一方だと思う。kaminariを使った場合は、kaminariという名前のgemがあったはず。それを使うと、kaminariのテーマをbootstrap風にできる。参考：http://d.hatena.ne.jp/Naruhodius/20120113/1326422433 ）。

<div class="pagination">
<ul>
<li><a href="">前へ</a>
<li class="active"><a href="">1</a>
<li><a href="">2</a>
<li><a href="">3</a>
<li><a href="">次へ</a>
</ul>
</div>

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

<body style="padding-top:60px">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="">サイト名</a>
<ul class="nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">何か</a></li>
<li><a href="">あれ</a></li>
<li><a href="">それ</a></li>
<li><a href="">ヘルプ</a></li>
</ul>
</div>
</div>
</div>

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

最後に、
とりあえず、ここで作ったものの全体を再掲。

<!DOCTYPE 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>
<body style="padding-top:60px">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="">サイト名</a>
<ul class="nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">何か</a></li>
<li><a href="">あれ</a></li>
<li><a href="">それ</a></li>
<li><a href="">ヘルプ</a></li>
</ul>
</div>
</div>
</div>

<div id="header">
</div>
<div class="container">
<form> #ほとんどの要素は適当に良いように綺麗にしてくれる。ただし、ボタンだけは、class=btnをつけること。
<label>名前</label><input type="text" name="name" class="span3">
<input type="submit" value="送信" class="btn">
</form>

<div class="pagination">
<ul>
<li><a href="">前へ</a>
<li class="active"><a href="">1</a>
<li><a href="">2</a>
<li><a href="">3</a>
<li><a href="">次へ</a>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min...">
<script src="js/bootstrap.min.js"></script>
</body>
</html>