Advertisement

50bootstrap-extension-1

 

Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。

 

 

この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。

 

 

ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。

 

 

 

制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント(アルファベット順)

アクセシビリティ (英: Accessibility)

Accessibility Plugin – ドロップダウンメニューやモーダルウィンドウ、イメージカルーセル、アラート、ポップオーバー、ツールチップなどを追加でき、 Bootstrap のアクセシビリティを改善してくれるプラグイン。

ベーシック・ボタン (英: Basic Buttons)

CSS3 Microsoft Modern Buttons – Windows で使われているMicrosoft スタイルのボタンをCSS3で実現した、スタイリッシュで軽量なライブラリ。
bootstrap_plugin_02

パンくずリスト (英: Breadcrumbs)

Bootstrap-Breadcrumb – JSを利用することでパンくずリストを自由に扱うことができるプラグイン。

カレンダー (英: Calendar)

Bootstrap Calendar – カレンダー機能をBootstrap に実装できるライブラリ。

bootstrap_plugin_04

カルーセル (英: Carousel)

Bootstrap Modal Carousel – フルスクリーンのモーダルウィンドウで展開する、イメージカルーセル表示用プラグイン。

bootstrap_plugin_05

チェックボックス (英:Checkbox)

PrettyCheckable – 初期設定のチェックボックスとラジオボタンを、より使いやすいスタイルに交換できるプラグイン。

bootstrap_plugin_06

カラーピッカー (英: Color Picker)

Simple Color Picker – Bootstrap に実装できる超軽量な jQuery カラーピッカー。

bootstrap_plugin_07

コンボボックス(ドロップダウンリスト)(英: Combobox)

Bootstrap Comboboxドロップダウリストを追加したいときに便利な、Bootstrap 対応のプラグイン。

bootstrap_plugin_08

コンタクトフォーム (英: Contact Form)

Bootstrap Contact – Bootstrap と jQuery バリデーションプラグインで作成された、シンプルな PHP コンタクトフォーム。

 

 

jQuery Girdform – 複雑なテーブルを基本としたお問い合わせフォームを作成できる jQuery プラグイン。

bootstrap_plugin_10

日付選択 (英: Datepicker)

Datepikcer – どんな要素にでもデートピッカー機能を追加できるプラグイン。

bootstrap_plugin_11

 
 

Date Range Picker – 昨日、過去1週間、過去30日など日付範囲を指定できるドロップダウンメニューを作成できます。
bootstrap_plugin_12

 

 

ClockPicker – アナログ時計をモチーフのインターフェースが面白い、Bootstrap用デートピッカー。

bootstrap_plugin_13

ダイアログボックス&アラート (英: Dialog Boxes & Alerts)

Bootbox.js – ポップアップで表示されるダイアログボックスを作成できる、軽量JSライブラリ。

bootstrap_plugin_14

 

 

Bootstrap Prompts – アラートなどの通知機能を、ポップアップ式のダイアログボックスに交換できるプラグイン。

bootstrap_plugin_15
 

 

Bootstrap Confirmation – 確認用ダイアログをつかったポップオーバー用プラグイン。

bootstrap_plugin_16

ファイルアップロード (英: File Upload)

jQuery File Upload – 複数ファイルを選択したり、ドラッグ&ドロップ、読み込みアニメーション、確認、プレビューイメージなどの機能満載のファイルアップロード用ウィジェット。

bootstrap_plugin_17

フォームバリデーション (英: Form Validation)

BootstrapValidator – 入力内容を確認するバリデーションに対応した jQuery プラグイン。

bootstrap_plugin_18

 

 

jqBootstrapValidation – Bootstrap フレームワークにバッチリ対応する、もうひとつのバリデーション用プラグイン。

bootstrap_plugin_19

 
 

Validator – シンプルでユーザーフレンドリーで使いやすいバリデーション確認プラグイン。

bootstrap_plugin_20

HTMLテーブル (英: HTML Tables)

Navigable Table – 入力されているテーブルをスムーズに移動できる Bootstrap 用プラグイン。

bootstrap_plugin_21

イメージギャラリー (英: Image Gallery)

Image Gallery – 写真や動画をモーダルダイアログで表示できるプラグイン。スワイプ機能の他に、マウス/キーボード操作、切り替えエフェクト、フルスクリーン対応、クリックによるコンテンツ読み込みなどを実装できます。

bootstrap_plugin_23

直接編集 (英: In-Place Editing)

X-editable – Bootstrap の各要素を編集可能にしてくれるライブラリ。

bootstrap_plugin_24

グリッドレイアウト (英: Layout Grid)

jQDrawBootstrapGrid – Bootstrap のレイアウトにグリッドカラムを表示する、制作に役立つシンプルなjQueryプラグイン。

bootstrap_plugin_25

ライトボックス (英: Lightbox)

Lightbox – Bootstrap のモーダルウィンドウに対応したシンプルなライトボックス用プラグイン。

bootstrap_plugin_26

虫めがねツール (英: Maginify)

Magnify – マウスオーバーすることで虫めがねを表示し、拡大ズーム可能にしてくれる JS プラグイン。

bootstrap_plugin_27

マークダウン (英: Markdown)

Bootstrap Markdown – Bootstrap にマークダウン編集機能を追加できるプラグイン。

bootstrap_plugin_28

モーダル・ウィンドウ (英: Modal Windows)

Bootstrap Modal – デフォルト設定のモーダルウィンドウに、レスポンシブやAjaxなどの機能を追加できる拡張プラグイン。

bootstrap_plugin_29

 

 

Bootstrap Scroll Modal – ページスクロールにも対応し、自由に高さを決めることができる高機能な Bootstrap 用モーダルプラグイン。

bootstrap_plugin_30

ナビゲーション (英: Navigation)

metisMenu – 複数の階層に分かれたナビメニューをさまざまな方法で表示できる Bootstrap 用 jQuery プラグイン。

bootstrap_plugin_31

 

 

Contextmenu – Bootstrap 内の右クリック機能を充実させるメニュー用プラグイン。

bootstrap_plugin_32

ページネーション (英: Pagination)

bootpag – Bootstrap でダイナミックなページ送り機能を実装できる jQuery プラグイン。

bootstrap_plugin_33

 

 

jQuery Pagination.pagination.activeなど分かりやすいクラス名を使い、Bootstrap のページ送り機能をよりシンプルに、よりわかりやすくしたプラグイン。

bootstrap_plugin_34

プログレス・バー (英: Progress Bars)

Bootstrap Progressbar – カラフルなカラーリングが特長の Boosttrap 用プログレスバー。

bootstrap_plugin_35

レーティング評価 (英: Ratings)

Bootstrap Star Rating – 「星2つ半」など細かいレーティングも可能な Bootstrap 用レーティング・プラグイン。

bootstrap_plugin_36

ソーシャル・ボタン (英: Social Buttons)

Social Buttons for Bootstrap – 各ソーシャルメディアを利用したサインイン用のCSSだけで作成されたボタン用ライブラリ。

bootstrap_plugin_37

セレクト (英: Selects)

bselect – Bootstrap のselectをスタイリングするプラグイン。

bootstrap_plugin_38

 

 

Bootstrap Multiselect – 複数の項目を選択できる jQueryをベースとしたプラグイン。

bootstrap_plugin_39

 

 

MultiSuggest – Bootstrap の Typehead コンポーネントを拡張するプラグイン。

bootstrap_plugin_40

タグ (英: Tags)

Bootstrap Tags – Bootstrap にタグ機能を追加できる jQuery プラグイン。

bootstrap_plugin_41

 

 

Tokenfield – キーボード操作とコピー/ペースト機能にも対応した高機能なタグ用 jQuery プラグイン。

bootstrap_plugin_42

目次 (英: Table of Contents)

Tocify – コンテンツ目次を自動生成してくれる jQuery プラグインで、Bootstrap の他に jQuery UI にも対応しています。

bootstrap_plugin_43

タブ (英: Tabs)

Tabcordion.js – Bootstrap のタブ機能を拡張し、アコーディオン機能にも対応するシンプルな jQuery プラグイン。

bootstrap_plugin_44

 

 

tabcollapse – モバイル端末ではアコーディオンを閉じて表示できるようにするプラグイン。

bootstrap_plugin_45

ツリーメニュー (英: Tree Menu)

EasyTree – 基本的なツリーメニューを表示できる、Bootstrap 用プラグイン。

bootstrap_plugin_46

 

 

BootstrapTreeNav – ツリーナビゲーションメニューを作成できる Bootstrap 用 Javascript プラグイン。

bootstrap_plugin_47

ビデオプレーヤー (英: Video Player)

Bootstrap Video Player – カスタマイズ可能なHTML5ビデオプレイヤーを実装できる jQuery プラグイン。

bootstrap_plugin_48

ウェブサイトツアー (英: Bootstrap Tour)

Bootstrap Tour – ウェブサイトの使い方を簡単に紹介するツアー機能をポップオーバーで表示する、Bootstrap用プラグイン。

bootstrap_plugin_49

WYSIWYG (英: WYSIWYG)

bootstrap-wysihtml5 – 簡単に利用できる WYSIWYG エディター機能を追加できる Javascript プラグイン。

bootstrap_plugin_50

 

 

Summernote – こちらもシンプルで使い勝手の良い Bootstrap 用 WYSIWYG エディター機能。

bootstrap_plugin_51

 

 

海外サイトSpeckyboy.comで公開された「50 Free Extensions, Plugins & Components for Extending Bootstrap の著者 Paul Andrew より許可をもらい、翻訳転載しています。

 

参照元リンク : 50 Free Extensions, Plugins & Components for Extending Bootstrap – Speckyboy.com