ドキュメント自体が bootstrap で作られていて、それがサンプルも兼ねていてそっから少しいじったメモ。以下、bootstrap の version 1.2.0 での話です。
使い方
bootstrap を使用しようとすると２通りの方法があります。
1. less.js を使用し less ファイルを読み込む方法。(こんな感じ)(※1)
2. css をファイルを読み込む。github に置かれています。
(※1)sass 的なやつです。less ファイルをコンパイルして css ファイルを作ることもできます。
これは npm でインストールする必要があるので node 環境が必要になってきます。
less と sass が分からない場合は”CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較“がわかりやすかったです。
画面上を16カラムで分割されていて、そこをどう使うかでレイアウトしていく感じ。
ちょっと使った感じ開発の時にはかなり使いやすい！！
ただDOMを書く量のが少し増える。その辺は snipets で対応できる範囲な気がしてる。
作ればそのうち公開する予定。そもそも作るかどうかもあるけど(ぉ
ぱっと見た感じはどうしても twitter っぽくはなるのは諦めるしかないｗ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.css" rel="stylesheet">
</head>
<body>
<!--
TOPBAR 必要ならここに記入
-->
<div class="container">
<!--
ここに各ページのDOMを追加
-->
</div>
<footer>
<p>© hoge</p>
</footer>
</body>
</html> |
こんな感じでコメントの所にDOMを追加すればすぐに試せる。
すてきですね。上記を少し変更して wrapper とかにしてやれば良い感じになります。
サイドバーを使いたい場合を contailer の部分をここの Fluid layoutみたいにすればいいです。
使う際は github や googlecode から js や css を参照してるけど、ローカルに変えた方がよいです。
TOPBAR は使用する際には 40px 分あるので div.contents を “margin-top: 60px”くらいしてやれば良い感じに表示されます。
“hero-unit” を指定していればそこのスタイルで指定されています。
基本的には ドキュメント にあるソースコードのとおりにかけばちゃんと動作します。
ただいくつか javascript が必要な部分があったりなどしたのでコピペで使えない部分を下記にまとめました。
注意点
基本的には HTML + CSS で完結していて非常に使いやすいのですがいくつか注意点が必要です。
1. TOPBARでドロップダウンのメニューを使用したい場合は javascript が必要（ここの”Dropdown example for topbar nav”の部分)
2. Twipsies を使用する際は javascript が必要（ここの”POSITION TWIPSIES”の部分)
3. alert や modal を表示後に消す処理等は自分で実装する
4. popover は bootstrap 意外にも自分で css を定義する必要がある。まぁ位置・サイズ指定が入るからそうなりますよね（ここの”Popover docs”の部分)
5. table で sort を使用したい場合は jquery.tablesorter.min.js が必要。sort せずにハイライトするだけなら css だけで可能
まとめ
作った人はすてきです。公開したことはもっとすてきです。
markdotto++
fat++