未分類

Twitter Bootstrapを使ってみた

Posted on 2011年10月19日 by me

Bootstrapとはtwitterが使用しているCSSを使うWebアプリケーションを作るためのツールキットらしい。


Twitter Bootstrap

そしてこれは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.完成

簡単な紹介ページの立ち上げに１時間もかからなかった！
対応ブラウザも豊富だし、自分でサービス作るときは使わせてもらおう。