Bootstrapとはtwitterが使用しているCSSを使うWebアプリケーションを作るためのツールキットらしい。
そしてこれはLessでも提供されている模様。
すごく簡単に導入できた。以下はver 1.3.0の場合(CSS版)
1.<head></head>内にタグを挿入する
<link href="/bootstrap/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; } </style> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <script type="text/javascript" src="/bootstrap/js/bootstrap-alerts.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-dropdown.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-modal.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-popover.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-scrollspy.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-tabs.js"></script> <script type="text/javascript" src="/bootstrap/js/bootstrap-twipsy.js"></script>
※Less版を利用するにはCSSのところを以下に変更
<link rel="stylesheet/less" href="/bootstrap/bootstrap.less">
2.簡単な構造を入れてみる
http://twitter.github.com/bootstrap/のQuick-start examplesから適当な構造をコピペ
3.好きなように構造を弄る
4.完成
簡単な紹介ページの立ち上げに1時間もかからなかった!
対応ブラウザも豊富だし、自分でサービス作るときは使わせてもらおう。