文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

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

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

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

TODC Bootstrap
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-wysihtml5
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
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)