Twitter BootStrapをより便利にする拡張機能20選

多くのフレームワークが登場しているなか、やっぱり便利なTwitter BootStrap。これをさらに便利なものにするため機能を拡張するプラグインがありますが、それらのまとめ記事がありました。この中から個人的に使えると思ったものを20個厳選してご紹介します。

50 Must-have plugins for extending Twitter Bootstrap

extending-twitter-bootstrap

 

1. Fuel UX

fuel-UX

チェックボックス、コンボボックス、データグリッド、ピルボックス、検索などBootstrapの機能を拡張します。

 

2. Jasny

jasny-bootstrap

こちらも機能拡張を実現します。機能が豊富で、Bootstrapと組み合わせることで非常にパワフルなフレームワークとすることが出来ます。

 

3. Simple Lightbox

simple-lightbox

サムネイル画像などを元のサイズで表示させるために使えるライトボックス。名前からもわかる通り非常にシンプルです。

 

4. Bootstrap Image Gallery

bootstrap-image-gallery

こちらはライトボックスに加え、”次の写真へ”などコントロール機能を取り込んでいます。たくさんの画像を並べるギャラリーサイトにはぴったりです。

 

5. Bootbox.js

bootbox-js

多様なモーダルウィンドウを実装するプラグインです。Bootstrap自体でもモーダルウィンドウは実装できますが、こちらを使えば非常に簡単に実装することが出来ます。

 

6. Bootstrap Form Helpers

bootstrap-form-helpers

セレクトボックスや、Dateピッカー、Timeピッカーなどなど、フォーム入力画面で使える機能が揃っています。

 

7. Bootstrap Tags

bootstrap-tags

タグ機能を実装するプラグインです。

 

8. Bootstrap Switch

bootstrap-switch

スイッチボタンを実装するプラグイン。こういうUIは取り込むと面白いですね。

 

9. Bootstrap Maxlength

bootstrap-maxlength

inputタグやtextareaタグに入力された文字数をカウントし、制限文字数に達したら入力できないように制御することが出来るプラグインです。

 

10. Bootstrap Multiselect

bootstrap-multiselect

multiple属性をつけたselectタグのUIをBootstrap風にします。

 

11. Bootstrap WYSIHTML5

bootstrap-wysihtml5

Bootstrap風なWYSIWYGエディターを実装するプラグインです。たった一行のJavaScriptで設置できます。

 

12. Bootstrap Form Wizard

bootstrap-wizard

複数ページにまたがったフォーム画面が作成できます。また左下にどこまで入力を終えたのかが分かるプログレスバーが表示されます。

 

13. Daterangepicker

date-range-picker

高機能なDateピッカーが実装できます。

 

14. Pick a Color

color-picker

カラーピッカーを実装できます。

 

15. Colorpicker for Bootstrap

colorpicker

カラーピッカーはいくつか種類があります。このタイプが一般的かもしれないです。

 

16. Color Palette

color-palette

こちらはカラーパレット。シンプルでよいですね。

 

17. Tablecloth

tablecloth-js

テーブルを実装するプラグインです。豊富なテーマの中から自分好みのデザインを選ぶことが出来ます。

 

18. Data Tables

datatables

こちらはよりリッチな機能をもったテーブルを実装できるプラグイン。件数フィルタリングや、ページネーション、検索機能がついています。

 

19. jQuery Bootpag

bootpag

ページネーションを実装するプラグインです。

 

20. Bootstro.js

bootstro-js

サイト内ツアーを実装するプラグインです。これは面白いです。

 

十分すぎるほど拡張機能があります。フラットデザインにおされ、リッチなデザインのTwitter Bootstrapの人気はやや下火になっているように感じますが、まだまだ現役です。フラットデザインのBootstrapなども公開されていますのでぜひ試してみてください。

 

Home > CSS | HTML > Twitter BootStrapをより便利にする拡張機能20選

Return to page top