Twitter Bootstrapとは、
本家からの引用：
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
エキサイト先生：
ブートストラップは、webappsとサイトのキックスタート開発に設計されたツイッターからのツールキットです。
それは、活版印刷、形式、ボタン、テーブル、グリッド、操縦、その他用の基礎CSSおよびHTMLを含んでいます。
とりあえず、本家サイト(
http://twitter.github.com/bootstrap/ )に行ってみてください。
webページを作るときにcssを書きますが、一般的なパーツを全てデフォルトで揃たものになります。
これだけ、importして使えばtwitterっぽくレイアウトやformとかカッコいいボタンが使えます。
↓下記をhtml内に書けばOK.サンプルコードを参考にするとわかりやすいです。
<link rel="stylesheet" href="
http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
カスタムする場合、デフォルトで使ってもカッコいいのですが、自分のサイトらしさを出すにはどうしてもcssを触りたくなります。
twitter bootstrapはless(
http://twitter.github.com/bootstrap/#less )というcssを動的に出力する機能?を使っており、直接編集することはあまりお勧めできません。理由として、cssのソースファイルは最終的にはcssを１ファイルにまとめればリクエスト数も減りページの高速化にもつながりますが、開発に置いては複雑になり開発しにくくなってしまいます。それとcss3対応に伴い、ブラウザ毎の書き方がたくさんあるため、lessなどのcssの拡張機能が有効です。
例えば、mixiinという機能では、
scssの場合、
.sample{
@include transition(width 500ms liner);
}
と書くと,
.sample{
-webkit-transition: width 500ms liner;
-moz-transition: width 500ms liner;
-ms-transition: width 500ms liner;
-o-transition: width 500ms liner;
transition: width 500ms liner;
}
と変換してくれます。グラデーションやshadowなどブラウザ毎の記述があったりするので、毎回書いたり編集するよりかなり便利です。
https://github.com/vwall/compass-twitter-bootstrap/blob/master/stylesheets/compass_twitter_bootstrap/_mixins.scss↑を見ると関数群があることがわかると思います。clearfixとかよく使う機能があって便利！
他にも変数が使えたり、cssの拡張は色々発展途上らしく less , sass , scssなど色々出てきています。
※機能的には大体同じな印象。
-node.jsがつかる環境の場合。 macの方はツールで何とかなるらしいです。※helpを参照してください。
そのまま、ヘルプを読めば適用できます。
-Railsの方
railsで使える,scssの形にして,bootstrapを使えるようにしてくれています。
stylesheets/compass_twitter_bootstrap at master from vwall/compass-twitter-bootstrap - GitHub
https://github.com/vwall/compass-twitter-bootstrap/tree/master/stylesheets/compass_twitter_bootstrap
-phpの方
scssが使えるかはわかりませんが、 sassを変換するライブラリはあるようです。
Railsの方で紹介したソースから、うまく適用すれば使えると思います。僕もcodeIgniterに組み込みたいと思ってます。
phamlp - PHP port of Haml and Sass - Google Project Hosting
http://code.google.com/p/phamlp/
-直接cssいじりたい方 ※非推奨
※上記、そこまで整えないで生でcssをいじる場合はfirebug等で頑張れば行けると思います。
参考サイト:
CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture
http://www.css-lecture.com/log/css3/css3-transition.htmlBootstrap, from Twitter
http://twitter.github.com/bootstrap/#layoutstwitter/bootstrap - GitHub
https://github.com/twitter/bootstrap
ã��ã�aã��é�´ã��è2・ã�£ã��ã�� on Twitpic">
æ�
