Debuginfo

思考とアウトプット

CSS framework, Bootstrapのインストールから設定まで。

1.トップページからDownloadをクリックしてダウンロード

http://twitter.github.com/bootstrap/ からZIPファイルをダウンロードしてFTPクライアント等でサーバにアップロードする。

2. Get startedのページを参考にhtmlを張り付け

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

3. Exampleを取ってきてブラウザ、iPhoneから確認

$ wget http://twitter.github.com/bootstrap/examples/fluid.html
$ wget http://twitter.github.com/bootstrap/examples/hero.html
$ vi fluid.html hero.html # change the link to fix the path to .css

特に日本語の表示を確認する。fluidが良さげなのでこれを編集していこう。

4. Stylebootstrapを利用して色を変える

http://stylebootstrap.info

設定していって最後のでかいボタンをクリックすると右上にダウンロードボタンが表示される。
これをwgetしてbootstrap.cssに名前を変えると変更がかかる。