twitter bootstrapのテーマ5個、拡張コンポーネント8個を紹介

Bootstrap
最近急速に普及されたBootstrapですが、
テーマやコンポーネントも揃ってきたので、現時点で存在するものをまとめてみました。

bootstrapテーマ

テーマを導入すると、UIを簡単に綺麗なものに変更する事ができます。

TODC Bootstrap

Googleをリスペクトし、現在のgoogleのUIをBootstrapで再現したテーマです。
最近のgoogleのUIはフラットです。
ボタン等はgoogleのボタンそのものです。再現度はかなり高いと思われます。
f:id:treeapps:20130220020439p:plain

Fbootstrapp

Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter

Facebook調のUIをBootstrapで再現したテーマです。
Facebookの特徴である、淡い青ベースの色調のテーマとなっています。
f:id:treeapps:20130220020457p:plain

BootMetro

Index

Windows8のメトロ調UIをBootstrapで再現したテーマです。
Metroの特徴であるフラットなUIです。
f:id:treeapps:20130220020514p:plain

BootstrapWP

509 Bandwidth Limit Exceeded

WordPressにBootstrapのテーマを適用する事ができます。

Themes for Twitter Bootstrap

WrapBootstrap - Bootstrap Themes & Templates

Bootstrapを使ったデザイン一式を配布しています。
ただし有償です。
Bootstrap自体はデザインし易いようにできているので、自力で作れる事も可能ですが、
面倒な方は購入してみてもいいかと思います。$15〜$20程度で購入できるものが多いようです。

bootstrapコンポーネント

拡張コンポーネントを導入すると、Bootstrap内蔵のコンポーネントを拡張又は追加する事ができます。

bootstrap-wysihtml5

Bootstrapにwysiwygエディタを追加するコンポーネントです。
機能的に少ないので、シンプルな使い方をする場合は使えそうです。
f:id:treeapps:20130220020532p:plain

fuel UX

Fuel UX

Bootstrapに以下の拡張コンポーネントを追加する事ができます。
沢山の機能があるのでおすすめです。
Wizard（パンくず）は見た目も綺麗で良い感じです。

Checkbox
Combobox
Datagrid
Pillbox
Radio
Search
Select
Spinner
Tree
Wizard

f:id:treeapps:20130220020553p:plain

Colorpicker and Datepicker for Twitter Bootstrap

Colorpicker and Datepicker for Twitter Bootstrap - Stefan Petre

Bootstrapにカラーピッカーとカレンダーピッカーを追加するコンポーネントです。
f:id:treeapps:20130220020605p:plain

Bootstrap Arrows.

Bootstrap Arrows

Bootstrapに「矢印のみを追加する」という潔いコンポーネントです。
大小7色の矢印が用意されています。
f:id:treeapps:20130220020620p:plain

Backgrid.js

Backgrid.js - A powerful widget set for building data grids with Backbone.js

Bootstrapのグリッド（テーブル）を拡張するコンポーネントです。
グリッドに対してカラム毎に昇順・降順ソート可能、ページングをサポート、その他細かいカスタマイズも可能です。
f:id:treeapps:20130220020636p:plain

jQuery File Upload

jQuery File Upload Demo

Bootstrapにファイルアップロードするコンポーネントを追加する事ができます。
ファイルアップロード機能は非常にありがたいですね。
複数のファイルを同時に選択・アップロードする事ができます。
Bootstrapのプログレスバーを利用して進捗状況もリアルタイムに反映されます。
f:id:treeapps:20130220020653p:plain

jQuery UI Bootstrap

Download jQuery UI Bootstrap

みんな大好きjQuery UIのUI部分にBootstrapのUIを適用する事ができます。
スライダーやアコーディオン等、jQueryUIでお馴染みの機能がBootstrapのUIで使用する事ができます。
f:id:treeapps:20130220020704p:plain

Elusive Icons

This page has moved

Bootstrap自体に140個のアイコンが内蔵されていますが、
このElusive Iconsはなんと、271個のアイコンを追加できるのです！
Bootstrap標準のアイコン・ソーシャルアイコン・一般的なアイコン、の3種にわかれているようです。
f:id:treeapps:20130220020718p:plain