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

medicalcloudのお気に入り

  • おぎやす広辞苑 おぎやす広辞苑
  • 松田佳祐の脳内 松田佳祐の脳内
  • 林檎商人のブック 林檎商人のブック
  • nara nara

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

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

twitter bootstrap

0pt

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を使った場合は、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>

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>

以上。

「twitter bootstrap」について友人に書いてもらう。

あなたにとって「twitter bootstrap」とは?

ログインするとワンクリックでキーワードを投稿できます

ログインする 新規登録する

お気に入りの説明

0 pt
CSSフレームワーク。 グリッドシステムとは 横幅940pxで12個の段組にわかれている中から選んでレイアウトを組み立てる。 <div class="span4" id="sideber"></div> ...
もっと読む

関連したキーワードを持つお気に入り

他の人の「twitter bootstrap」を見る