Twitter

スマートで簡単にWeb開発できる「Twitter Bootstrap」

「Twitter Bootstrap」は、Twitter社が提供しているフロントエンドフレームワークです。デザインが本業ではないエンジニアでも、「Twitter Bootstrap」を利用するだけで、簡単にTwitterのようなデザインのWebサイトが出来上がります。

Twitterの綺麗で使いやすいインターフェイスを簡単に導入できるのは、大きな魅力です。

Twitter提供なので、PC・タブレット・スマートフォンに対応したレスポンシブCSSです。もちろん固定幅にも設定できます。IEは7以上の対応になります。

導入ももちろん簡単です。

「Bootstrap（http://twitter.github.com/bootstrap/index.html）」からコンパイルされたセットがダウンロード出来ます。
ファイル構造は下図のようになっています。

あとは、別途jQueryをダウンロードして、CSS→jQuery→bootstrap.jsの順でHTMLに記載していくだけです。
「全ての機能はいらなくて、一部だけでいい」という人には、こちらの「Custmize（http://twitter.github.com/bootstrap/index.html）」ページから、必要な機能のみを選択してダウンロードできます。

ドキュメントはとても充実していて、それぞれの箇所で例がきちんと表示されているので、英語を読まなくても使えるほどです。

○Scaffoldingページ（http://twitter.github.com/bootstrap/scaffolding.html）
Gridシステムや2カラムレイアウト、レスポンシブデザインごとのclass付け方法が記載されています。

○BaseCSSページ（http://twitter.github.com/bootstrap/base-css.html）
タイポグラフィ、Code（inline、Block）、テーブル、フォーム、ボタン、イメージ、アイコンなど基本になるCSSが説明されています。

○Componentsページ（http://twitter.github.com/bootstrap/components.html）
コンポーネントの説明です。ドロップダウンやナビゲーション、パンくず、ページネーション、ラベル、サムネイル、アラート、プログレスバー、メディアオブジェクトなどがあります。

○JavaScriptページ（http://twitter.github.com/bootstrap/javascript.html）
JavaScriptの説明です。トランジションやドロップダウン、タブ、ツールチップ、カルーセルなどがあり、それぞれ導入したら少し面倒な機能がまとめられています。

この「Twitter Bootstrap」をベースに、たくさんの人がカスタマイズして公開しています。
○TODC Bootstrap（http://todc.github.com/todc-bootstrap/index.html）
Googleのサイト風にカスタマイズされたBootstrapです。わかりやすいところだと色合いがGoogleっぽい色になっています。

○Fbootstrapp（http://ckrack.github.com/fbootstrapp/）
FacebookのデザインにカスタマイズされたBootstrapです。
Facebookが提供しているのかと思うほど、Facebookそっくりの見た目になります。

○Customizable user interfaces PSD templates for iPad and iPhone apps:（http://gui.repixdesign.com/#bootstrap）
PSDデザインを販売している方のサイトです。Bootstrapを再現したPSDデータはFreeで提供されています。

関連記事