ENTEREAL

Bootstrapで使えるjQueryプラグイン

テンプレート

{wrap} Bootstrap

{wrap} Bootstrap

Bootstrapでそのまま使えるHTMLとCSS、素材セットを紹介しています。テンプレート自体は少額有料ですが、デザイン性が高く結果的に安上がりかも。

https://wrapbootstrap.com/

BootstrapStyler

BootstrapStyler

Bootstrapでそのまま使えるHTMLとCSS、素材セットを紹介しています。無料でダウンロード出来る点が非常に嬉しいです。

http://bootstrapstyler.com/

Bootstrap Themes

Bootstrap Themes

Bootstrapのテンプレートがダウンロードできます。

http://portnine.com/bootstrap-themes

Bootstrap jQuery Mobile Theme

Bootstrap jQuery Mobile Theme

Bootstrapをベースに作成したモバイル用サイトにjQueryMobileライクなUIを適用するプラグインです。

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Start Bootstrap

Start Bootstrap

Bootstrapをすぐにスタート出来るように大まかなレイアウトテンプレートを無料で配布しています。

http://startbootstrap.com/

Bootswatch

Bootswatch

Bootstrap専用のカスタムデザインテンプレートが無料でダウンロードできます。

http://bootswatch.com/

Shprink One

Shprink One

Bootstrap3に対応したフラットデザインのテンプレートです。

http://wordpress.org/themes/shprink-one

Bootsketch

Bootsketch

Bootstrap3で簡単にワイヤーフレームを作成可能にするテンプレートセットです。

http://yago.github.io/Bootsketch/

UI キット

Bootplus

Bootplus

BootstrapをGoogle風のスタイルにするキットです

http://aozora.github.io/bootplus/

Fbootstrapp

Fbootstrapp

BootstrapをFacebook風のスタイルにするキットです

http://ckrack.github.io/fbootstrapp/

Metro UI Kit

Metro UI Kit

Bootstrapをフラット(Metro) UIに変更できます。

http://pixelkit.com/kits/metro-ui-kit/

Flat UI

Flat UI

Bootstrapを最近流行りのフラットUIに変更できます。

http://designmodo.github.io/Flat-UI/

Flatstrap

Flatstrap

Bootstrap用のフラットUIにキットです。

http://www.littlesparkvt.com/flatstrap/index.html

metro-bootstrap

metro-bootstrap

Bootstrapの表示をWindows8風のMetroスタイルに変更するためのCSSとその周辺ツールです。

http://talkslab.github.io/metro-bootstrap/index.html

Metro UI CSS

Metro UI CSS

Bootstrapの表示をWindows8風のMetroスタイルに変更するためのCSSとその周辺ツールです。

http://metroui.org.ua/

Wicket-Bootstrap

Wicket-Bootstrap

色を中心に、オリジナルと若干違うUIを実現するためのスクリプトセット。

http://wb.agilecoders.de/demo/home

Bootflat

Bootflat

Bootstrap 3.xに対応したフラットデザインのUIキットです。

http://bootflat.github.io/

Fuel UX

Fuel UX

UI系特にフォームエレメントなどの全体的な強化ができます。データグリッドなどが便利そうです。

http://exacttarget.github.io/fuelux/

Maverix Bootstrap Theme

Maverix Bootstrap Theme

名前の通りMac OSのMarverixの見た目を取り入れたUIテーマセットです。やはりブラウザはSafariが一番マッチします。

http://screenisland.com/maverix/#/view1

Dashboards by Keen IO

Dashboards by Keen IO

グラフィカルなチャートを多用したダッシュボードを作成するためのUIテンプレートセットです。

http://keen.github.io/dashboards/

bootstrap-google-plus New

bootstrap-google-plus

名前の通りGoogle+の見た目を取り入れたUIテーマセットです。

https://github.com/iatek/bootstrap-google-plus

アイコン / フォント / 色

Font Awesome

Font Awesome

Bootstrapの画像ベースのアイコンを、フォントベースのアイコンに変えることが出来ます。簡単な設定をするだけで、400以上のアイコンが自由に使えます。また、複数のアイコンを組み合わせてオリジナルアイコンも簡単に作れます。

http://fortawesome.github.io/Font-Awesome/

ionicons

ionicons

iOS7のようなシンプル/フラットも含んだアイコンフォントです。

http://ionicons.com/

Elusive-Icons Webfont

Elusive-Icons Webfont

Bootstrapの画像ベースのアイコンを、フォントベースのアイコンに変えることが出来ます。フォントベースなので色の変更や大きさの調整が非常に楽です。

http://shoestrap.org/downloads/elusive-icons-webfont/

Fontello

Fontello

自分の使いたいアイコンだけを選んで軽量のフォントファイルとしてダウンロードできるサイトです。プラグインではないですが、非常に便利なので。

http://fontello.com/

Bootstrap Arrows

Bootstrap Arrows

簡単に矢印を追加することができます。色や大きさ、角度などが自由に調整できます。

http://bootstrap-arrows.iarfhlaith.com/

Lavish

Lavish

任意の画像から色を抽出し、Bootstrap用のカラーCSSを作成してくれるオンラインルーツです。

http://www.lavishbootstrap.com/

UI エレメント

TABLE/GRID 関連

Filterable

Filterable

テーブルのカラムにフィルターの機能を追加するプラグインです。

http://lightswitch05.github.io/filterable/

tablecloth.js

tablecloth.js

tableに対し、簡単に美しい見た目のスタイルを適用するスクリプトです。

http://tableclothjs.com/

editableTableWidget

editableTableWidget

Bootstrapの表テーブルをExcelのシートのような、編集可能なセルにするプラグインです。

http://mindmup.github.io/editable-table/

Navigable Table

Navigable Table

テーブルやグリッドレイアウトされたインプット項目を効率よくカーソル移動する為のプラグインです。

https://github.com/gr2m/bootstrap-navigable-table


ナビゲーション/メニュー

metisMenu

metisMenu

メニューやナビゲーションにアコーディオン(伸縮機能)を付加する事ができるプラグインです。

https://github.com/onokumus/metisMenu

Bootstrap Context Menu

Bootstrap Context Menu

右クリックで現れるメニューを簡単に実装ができるプラグインです。

https://github.com/sydcanem/bootstrap-contextmenu


画像/モーダル関連

bootstrap Image Gallery

bootstrap Image Gallery

タイトルの通り、画像ギャラリーを簡単に作成することができます。マウスやスワイプ操作に対応しているので、PCとスマホの両方で使えます。

http://blueimp.github.io/Bootstrap-Image-Gallery/

Bootstrap Lightbox

Bootstrap Lightbox

Bootstrapのモーダルをも少し拡張し、Lightboxみたいに使えるプラグインです。

http://jbutz.github.io/bootstrap-lightbox/

Bootstrap modal carousel

Bootstrap modal carousel

フルスクリーンカルーセルを作成できるプラグインです。普通のカルーセルとモーダル表示を組み合わせたようなイメージのものです。

http://noreiller.github.io/bootstrap-modal-carousel/index.html

bootstrap-accessibility

bootstrap-accessibility

Webページにモーダルやツールチップなどアクセシビリティ(扱いやすさ)を向上させる機能を提供します。

https://github.com/paypal/bootstrap-accessibility-plugin

Bootstrap-Modal

Bootstrap-Modal

Bootstrapデフォルトのシンプルなモーダルの機能を強化することができます。

http://jschr.github.io/bootstrap-modal/

jsPanel for bootstrap

jsPanel for bootstrap

Bootstrapデフォルトのシンプルなモーダルの機能を強化して、あらゆるフローティングウインドを実現可能です。ポップアップやアラートとしても使えます。

http://jspanel.de/bootstrap/

Bootstro.js

Bootstro.js

要素に対して順番に説明ポップアップを付与できます。画面の操作や機能の説明に使えそうです。

http://clu3.github.io/bootstro.js/

Bootstrap Confirmation

Bootstrap Confirmation

ポップアップと確認のためのアラートの中間的な機能を実現するプラグインです。言葉でうまく説明するのが難しいので、デモをご覧ください。

http://ethaizone.github.io/Bootstrap-Confirmation/

Bootbox.js

Bootbox.js

ポップアップアラートに特化したダイアログ表示のプラグインです。

http://bootboxjs.com/

bootstrap-prompts

bootstrap-prompts

同じくポップアップアラートを実現するプラグインです。

https://github.com/sairam/bootstrap-prompts

bootstrap-magnify

bootstrap-magnify

画像に拡大鏡の機能を付加するプラグインです。

https://github.com/marcaube/bootstrap-magnify

Bootstrap video player

Bootstrap video player

HTML5に対応したビデオプレーヤープラグインです。

http://html5-ninja.com/#/item/Bootstrap-video-player-jQuery-plugin/5


ブログ関連

Tags Manager

Tags Manager

ブログのタグ付与などに役立ちそうなプラグインです。

http://welldonethings.com/tags/manager

Bootstrap Tags

Bootstrap Tags

同じく、ブログのタグ付与などに使えるプラグインです。

http://welldonethings.com/tags/manager

Bootstrap Star Rating

Bootstrap Star Rating

コンテンツ評価(レーティング)のための「星3つ」「星5つ」などが実現できるプラグインです。

http://plugins.krajee.com/star-rating

jQuery Pagination

jQuery bootpag

ページリンクを追加してくれるプラグインです。

https://entereal.co.jp/dev_jqPagination.html

jQuery bootpag

jQuery bootpag

ページリンクを追加してくれるプラグインです。

http://botmonster.com/jquery-bootpag/


その他

Link preview

Link preview

リンクURLを入力するだけで簡単にページやアイテムを表示ができます。アフィリエイト広告などの挿入に非常に便利そうです。

https://github.com/Ekito/bootstrap-linkpreview

UserPie

UserPie

表面がBootstrapで、裏がPHPで作られたユーザログイン認証のためのフレームワークです。

http://userpie.com/

フォーム エレメント

ボタン 関連

Beautiful Buttons for Twitter Bootstrappers

Beautiful Buttons for Twitter Bootstrappers

ボタンの色や形、サイズなどを自由に変更し、CSSを出力してくれるオンラインツールです。

http://charliepark.org/bootstrap_buttons/

Button Builder

Button Builder

Bootstrapで用意されているボタンをオンラインのGUIで設定できるようにしたものです。初心者にはありがたいものですが、それ以外の人にとっては・・・。

http://bootsnipp.com/buttons

Buttons

Buttons

Bootstrapのボタンを今風の丸形ボタンやフラット四角ボタンにしてくれるCSSボタンです。Bootstrapのクラス名がそのまま使えるので導入も簡単です。

http://alexwolfe.github.io/Buttons/

BootsButton

Buttons

Bootstrapのボタンをボタンクリックのみで簡単/自由にカスタマイズし、コードを取得できるサイトです。もちろん日本語のボタンも作れます。機能的には真上の「Button Builder」と全く一緒です。

http://www.thiagocanudo.com.br/bootsbutton/

CSS3 Microsoft Modern Buttons

CSS3 Microsoft Modern Buttons

名前の通り、MicrosoftのModernに似たボタンUIが手に入ります。

http://ace-subido.github.io/css3-microsoft-metro-buttons/index.html

Social Buttons for Bootstrap

Social Buttons for Bootstrap

簡単にソーシャルメディアへのアイコン付きリンクボタンを作成する事が出来ます。

http://lipis.github.io/bootstrap-social/


SELECT/OPTION 関連

Select2

Select2

セレクトフォームをキーボード入力で絞込みが出来るプラグインです。セレクトフォームにたくさんの選択肢がある場合には重宝します。

http://ivaynberg.github.io/select2/

Bootstrap Combobox

Bootstrap Combobox

セレクトエレメントにフィルター機能を付けたようなプラグインで、コンボと呼んでいます。選択肢が多いときには使えそうですが、日本語にはあまりマッチしない感じもします。

https://github.com/danielfarrell/bootstrap-combobox

Bootstrap Multiselect

Bootstrap Multiselect

複数選択可能なセレクトボックスをより便利なチェックボックス併用型にカスタマイズできるプラグインです。

http://davidstutz.github.io/bootstrap-multiselect/

prettyCheckable

prettyCheckable

チェックボックスやラジオボタンのUIをカスタマイズし、Android OSのような見た目にしてくれます。

http://arthurgouveia.com/prettyCheckable/

Tab drop for Bootstrap

Tab drop for Bootstrap

ドロップダウン形式のメニューを簡単に作成できます。

http://www.eyecon.ro/bootstrap-tabdrop/

Bootstrap switch

Bootstrap switch

iPhoneやAndoridのようなオン/オフのトグルスイッチを簡単に実装できます。

http://www.larentis.eu/switch/


PICKER/SLIDER 関連

Datepicker for Bootstrap

Datepicker for Bootstrap

シンプルなデイトピッカーです。

http://www.eyecon.ro/bootstrap-datepicker/

Date Range Picker for Twitter Bootstrap

Date Range Picker for Twitter Bootstrap

いわゆる通常のデイトピッカーに「今週、過去1年、去年」などの範囲指定が簡単にできる機能を加えたプラグインです。Google Analyticsの日付の範囲指定みたいなヤツ。

http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

Datepair.js

Datepair.js

こちらも2つの日付を選択するプラグインですが、こちらは、Googleカレンダーのような片方を指定すると、もう一つが(所定の間隔をあけた日付や時間で)自動選択されます。

http://jonthornton.github.io/Datepair.js/

BIC Calendar

BIC Calendar

シンプルなカレンダーです。サイドウィジットなどに使えそうです。

http://bichotll.github.io/bic_calendar/

Bootstrap Calendar

Bootstrap Calendar

Googleカレンダーのように年/月/週/日の切り替えが可能なカレンダープラグインです。かなり便利そう。

http://bootstrap-calendar.azurewebsites.net/

ClockPicker

ClockPicker

時計を模したユニークなUIを持った、クロックピッカー(時間指定)です。

http://weareoutman.github.io/clockpicker/

Colorpicker for Bootstrap

Colorpicker for Bootstrap

jQueryウィジットなどにあるカラーピッカーを実装できます。

http://www.eyecon.ro/bootstrap-colorpicker/

Slider for Bootstrap

Slider for Bootstrap

シンプルなスライダーを実装可能です。

http://www.eyecon.ro/bootstrap-slider/

Iconpicker for Bootstrap

Iconpicker for Bootstrap

アイコンピッカーです。

http://victor-valencia.github.io/bootstrap-iconpicker/

Bootstrap Form Helpers

Bootstrap Form Helpers

日付、時間、数値、国名、言語など、様々な入力/選択操作を簡単にしてくれる、まさにヘルパーです。無料版は7つの機能を、有料版では16の機能を使うことができます。

http://bootstrapformhelpers.com/


FILE 関連

jQuery File Upload

jQuery File Upload

Bootstrapでブラウザからのファイルアップロードを実現します。受信サーバ側は(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)など様々な言語に対応可能です。

http://blueimp.github.io/jQuery-File-Upload/

Bootstrap FileStyle

Bootstrap FileStyle

ファイルインプットを簡単な設定のみで他のエレメントと同様のスタイルにカスタマイズすることが出来るものです。

http://markusslima.github.io/bootstrap-filestyle/


入力制限/チェック関連

Bootstrap MaxLength

Bootstrap MaxLength

入力文字の長さ制限やそのカウントなどに特化したプラグインです。

http://mimo84.github.io/bootstrap-maxlength/

Bootstrap Form Validation

Bootstrap Form Validation

Bootstrapで作成したフォームに様々な入力チェック機能と警告メッセージ機能を追加できます。

https://entereal.co.jp/dev_validationV2.html


WYSIWYG 関連

bootstrap-wysihtml5

bootstrap-wysihtml5

Bootstrap上でwysiwyg editor(HTMLエディタ)を実現するプラグインです。デザインもマッチしていて使いやすそうですし、実装も$('.textarea').wysihtml5();だけだそうです。

http://jhollingworth.github.io/bootstrap-wysihtml5/

Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor

Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor

同じく、Bootstrap上でWYSIWYG editor(HTMLエディタ)を実現するプラグインです。

http://www.queness.com/post/14200/twitter-bootstrap-html5-wysiwyg-rich-text-editor

Bootstrap Markdown

Bootstrap Markdown

マークアップ言語(HTMLなど)のエディットボックス、いわゆるwysiwyg editor(HTMLエディタ)を実装するプラグインです。

http://toopay.github.io/bootstrap-markdown/

X-editable

X-editable

画面表示上でそのまま文章をエディットできる便利ツールです。

http://vitalets.github.io/x-editable/


その他

jQuery.gridform

jQuery.gridform

jQueryだけで、Bootstrapのグリッドを実現するもくてきのもので、それをあえてBootstrapに組み込む意味は少ないかもしれません。

http://gunnar-t.github.io/jquery.gridform/index.html

その他

jetstrap

jetstrap

Bootstrapの画面作成が簡単に出来るオンラインWEBツールです。

https://jetstrap.com/

Bootstrap Live Customizer

Bootstrap Live Customizer

Bootstrapのデザインや色、レイアウトなどカスタマイズしたcssを作成することが出来るオンラインツールです。デフォルトとの違いは、変更箇所をライブで確認しながら作業が出来る点で、かなり使い勝手が良いです。

http://bootstrap-live-customizer.com/

WordPress Twitter Bootstrap CSS

WordPress Twitter Bootstrap CSS

WordPressをバックに表面をBootstrapで実現するためのCSSです。

http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

Built With Bootstrap

Built With Bootstrap

Bootstrapで作成されているサイトのギャラリーです。

http://builtwithbootstrap.com/

RepixDesign

RepixDesign

Bootstrap画面パーツのPSD素材を提供しているサイトです。

http://gui.repixdesign.com/#bootstrap

BootstrapCDN

BootstrapCDN

Bootstrap本体JavaScriptやCSSだけでなく、アイコンフォントやカスタムデザインテンプレート等をオンライン(CDNとして)使うリンクを提供しています。

https://www.bootstrapcdn.com


Tags

Same Category

Bootstrap4のブレイクポイント計算機

Bootstrap Form Generator