酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

ひと味ちがうTwitter Bootstrapリソースまとめ、UIパーツ編

Twitter-bootstrapのUIパーツをまとめたページです。素のTwitter Bootstrapにはない、かゆいところに手が届きそうなUIパーツをまとめています。

姉妹ページの『Twitter Bootstrapについてのテンプレート(レイアウト)のまとめ』もどうかよろしくおねがいします!

この記事は今後も新しいリソースを見つける度に順次アップデートしていく予定です!

(08/19 20:00) 色々内容の加筆修正をしました!
(08/20 21:00) Fuel UXを追加


Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

Fuel UX

Fuel UXはTwitter Bootstrapのウィジェットをまとめて拡張してくれるツールです。チェックボックスや、コンボボックス、データグリッド、ピルボックス、検索ボックス、スピナー、エクスプローラーっぽいツリー、ウィザードなどが追加されます。

Fuel UX

MoonGiftさんの記事『Bootstrapで物足りなく感じているウィジェットをまとめて提供「Fuel UX」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ』にはサンプル画像付きで表示されているのでこちらもオススメです!

LayoutIt!

ドラッグアンドドロップ形式でBootstrapペースのレイアウトを作成できるWebツールです。作成したら、HTML/CSSでダウンロード出来ます!

スクリーンショット 2013-04-20 14.56.54

Bootsnipp.com

BootstrapのUIパーツを集めたサイトです。テンプレートよりも簡単に導入できるので良かったら使ってみてください!

bootsnipp

Twitter Bootstrap templates

Twitter-Bootstrapのためのテンプレート集です。無料のものと有料のものがあるようです。

Twitter Bootstrap templates

Pines Notify

下の画像の右上に出ているような、javascriptによるノーティフィケーションを表示してくれるツールです。Webサイト上でインタラクティブなお知らせを表示する場合などに活用できそうです!

Pines Notify

bootstrap-wysihtml5

BootsrapにマッチしたWYSIWYGを1行で追加できるUIパーツです。

bootstrap-wysihtml5

Datepicker for Bootstrap

Bootsrapにマッチしたデータピッカーです。

Datepicker for Bootstrap

bootstrap-datetimepicker

Bootstrapにマッチしたデータピッカー、第2段です。

bootstrap-datetimepicker

jQuery prettyCheckable

ラジオボタンやチェックボックスを写真のようなデザインに置き換えてくれるjQuery プラグインです。コンバージョンを意識する場合には選択肢としてありだと思います!

jQuery prettyCheckable

Bootstrap Form Helpers

Bootstrapに最適なフォーム入力支援jQuery Pluginです。
サポートしてくれるフォームのタイプは12種類です。

(1) セレクトボックス
(2) 国情報
(3) 州(都道府県)
(4) 通貨
(5) 電話番号
(6) 言語
(7) タイムゾーン
(8) Googleフォントの種類
(9) Date Picker(日付)
(10) 時刻
(11) フォント種類
(12) フォントのサイズ

Bootstrap Form Helpers

MagicSuggest

BootstrapにマッチしたオートコンプリートのjQuery Pluginです。

MagicSuggest

Select2

検索時の補完や、タグの複数選択などができるjQuery Pluginです。後発のツールだけあって、その分多機能です!

Select2 3.3.2

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

Bootstro.js

Bootstrapにマッチしたサイトの利用手順をオーバーレイで表示してくれるjQueryです。

Bootstro.js

Twitter Bootstrap Button Generator

Bootstrapの基本デザインをベースにしたボタンを生成できます。ベースの色合いを崩さないので、とっても使いやすそうです!

Twitter Bootstrap Button Generator

Bootstrap Tags

フォーム内でのタグの選択などに最適なjQuery Pluginです。

Bootstrap Tags

Beautiful Buttons for Twitter Bootstrappers

BootstrapにマッチしたCSSボタンを作ることが出来るツールです。色合いやグラデーションを簡単に調整することができます。こちらはBootsrapを拡張してオリジナリティのあるボタンが出来ます。

Beautiful Buttons for Twitter Bootstrappers

Social Buttons for Twitter Bootstrap

Bootstrapのデザインにマッチしたソーシャル系のボタンを作成出来ます。
(Facebook, Twitter, GitHub, Pinterest, Linkdinなど)

Social Buttons for Twitter Bootstrap

Bootstrap Image Gallery Demo

Bootstrapのデザインにマッチしたイメージ・ギャラリーを作成することができます。

Bootstrap Image Gallery Demo

jQuery File Upload

jQueryによるFile アップローダーです。コレを使うメリットは、アップロード前のプレビュー表示や、プログレスバーの表示、ドラッグアンドドロップへの対応などなど。

スクリーンショット 2013-08-19 19.23.00

jquery-simplecolorpicker

サイトの種類次第では地味に必要になるカラーピッカーのTwitter-Bootstrap版。自分で作りこむと結構骨が折れそうなのでオススメです!

jquery-simplecolorpicker

jQuery-menu-aim

これはBootstrap用ではないですが、狙いは面白いのでご紹介。Amazonのメニューっぽいドロップダウンメニューを提供していくれるjQueryプラグインです。

jQuery-menu-aim

BootstrapCDN

Twitter Bootstrapを配信してくれるCDNです。CDNを使ってサーバ負荷分散をしたい場合には選択肢としてありだと思います。

BootstrapCDN

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

このテーマに関連するオススメ本

IAシンキング Web制作者・担当者のためのIA思考術』は、デザインの前段階として情報をどのように整理して見せるかをいうインフォメーションアーキテクチャ(IA)についての書籍です。見た目がどんなにきれいでも、使い勝手が悪かったり、動線が悪かったりといった問題を解決するために、デザイナさんだけでなく、Webサイトの開発に関わる全ての人に読んでほしい書籍です。


Special Thanks

35 Must Have Bootstrap Tools and Generators

変更来歴

(04/05 15:15) Bootstrap Form Helpersを追加しました
(04/09 15:25) jQuery-menu-aimを追加しました
(04/09 15:40) bootstrap-datetimepickerを追加しました
(04/10 16:20) Beautiful Buttons for Twitter Bootstrappersを追加
(04/10 16:30) Twitter Bootstrap Button Generatorを追加
(04/20 15:00) LayoutItを追加
(05/14 20:25) Select2を追加
(05/22 11:40) Social Buttons for Twitter Bootstrapを追加
(06/02 13:55) Bootstrap Image Gallery Demoを追加
(08/19 20:00) 色々内容の加筆修正をしました!
(08/20 21:00) Fuel UXを追加

おすすめの書籍