Twitter Bootstrapの設定と使い方

Twitter Bootstrapを設定・使用してみたので記録します。

スポンサーリンク

何故Twitter Bootstraoを使ってみようと思ったのか

cssに詳しくない為、テンプレート?フレームワーク?としてあるものをベースにサイトを作りたかったからです。

メジャーなものを調べると、今回のTwitter Bootstrapにひっかかりました。

Twitter Bootstrapのダウンロード・設定

公式サイトより無料入手可能です。

http://getbootstrap.com/http://getbootstrap.com/

  • css
  • fonts
  • js

のディレクトリをwebrootにbootstrapディレクトリを作ってぶちこみました。

実際にTwitter Bootstrapを使ってみる

bootstrapディレクトリにindex.htmlを作成して、公式サイトのサンプルHTMLをコピペして、ブラウザから見てみました。

あとはこちらの参考サイト様でもボタンなどのサンプルHTMLがありましたのでコピペして試してみました。

Twitter Bootstrapの無料テーマダウンロード

公式のこちらからダウンロード出来ます。cssだけでなくscssなども選べました。

自分はデフォ厨としてデフォで行ってみたいと思います。先ずは。

この公式からテーマを選んで、そのソースをそのままコピペすると使えました。

こんなすぐ使えるとは思ってませんでした。

便利なんですね。

日本語リファレンスありました

こちらです。コンポーネントページが非常に参考になります。

http://bootstrap3.cyberlab.info/

参考サイト様

http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html