高田のあたりまえノート単語集
(603 keywords)

medicalcloudのお気に入り

  • abecchiのブック abecchiのブック
  • ariiiia ariiiia
  • 小坂 英二のブック 小坂 英二のブック
  • akkun_choi pedia akkun_choi pedia

高田のあたりまえノート単語集のメンバー

  • akkun_choi akkun_choi
  • 西小倉パンデイロ 西小倉パンデイロ
  • 里香 里香
  • おぎやす おぎやす

twitter bootstrapの履歴

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

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

使い方。

1,twitter bootstrap公式サイトからダウンロードしておく(rails3の場合、twitter-bootstrap-railsとかみたいなgemを使うほうが楽だと思う)。
2,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とついているものも一緒に読み込むことで、ブラウザの幅に応じて適当に対応してくれる。とりあえずの簡単スマホ対応になるので、使っておこう。

3,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は、この項目を書いた時点での最新版。

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

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

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

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


6,pagination
paginationはこんな感じ(このステップで書いているpaginationのhtmlは、railsでwill_paginateを使ってpaginationをした場合、作るのが面倒くさい。will_paginateを使うなら、この項目は無視するのも一方だと思う。kaminariを使った場合は、bootstrap-kaminari-railsだったか、なんか、そんな感じの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>

7,ナビゲーションバー
これは、カッコイイので使うといいと思う。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>

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


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

<!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>

以上。