twitter bootsrap 3を使ってみた

20130823 0

twitter bootsrap 3を使ってみた

先日 twitter bootstrap 3 が先日(2013/08/19)に公開されました。twitter bootstrapとはtwitterが制作し公開しているCSSのフレームワークで、これを利用することで短時間でサイトを制作することができます。1からCSSを自作してサイトに組み込むのもいいですが、このように公開されているものを組み込み利用することでサイト制作にかける時間を短縮することができます。

twitter bootstrap 3の導入方法

twitter bootstrap 3 を使って見るには、まずBootstrapのページにアクセスし、画面上の「 Download Bootstrap 」のボタンをクリックしzipファイルをダウンロードします。ダウンロードできたzipファイルを解凍するとたくさんのファイルがつくられますが、実際に必要なのは「 dist 」フォルダの中身だけです。このフォルダの中身をそのままコピーして使いましょう。

20130823 1

またはbrewを利用してもインストールすることができますが、今回はダウンロードしたものを使うことを前提で解説します

以下の様なフォルダ構成になるはずです。

twitter bootstrapのサイトでも紹介されていますが、以下のコードのようにの中でbootstrap.min.cssを読み込んでください。これでbootstrapが利用できるようになります。

今回のbootstrap3で変わった点といえばデザインとしてはフラットデザインが採用になり、また、今回からはレスポンシブデザインが初期状態から導入された状態になっています。

20130823 2

デザインについてもグリッドシステムが強く利用されるようになり、12分割したグリッドを利用します。

いろいろと新しく変わっている部分がありますので、このブログでもこれから徐々に紹介していくつもりです。

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
ワークス アルディート
エムディエヌコーポレーション
売り上げランキング: 17,921
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
野田 一輝 加藤 俊司 藤田 拓人 清水 豊 細川 富代 野田 真穂 川下 城誉 根岸 良樹 岩堀 真吾 大竹 孔明
エムディエヌコーポレーション
売り上げランキング: 59,963
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
エムディエヌコーポレーション
売り上げランキング: 108,704
Bootstrap
Bootstrap
posted with amazlet at 13.08.23
Jake Spurlock
Oreilly & Associates Inc
売り上げランキング: 48,933