Twitter

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

Bootstrap_20130607-111024

「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で提供されています。