Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」:phpspot開発日誌
Hoverify Bootnav 1.0.0 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」 ナビゲーションメニューに様々なアニメーションを付けることが出来ます。 関連エントリ 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ
How to code JavaScript using Bootstrap best practices? | Theodo
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). It provides a lot of UI plugins easy to implement. You've probably already used it but have you looked at how it worked? Together, we will try to make another plugin using the same best practices as Twitter. Through this tutorial I will introduce some JavaScript concepts like protot
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
Bootstrapに便利な機能を追加できるjQueryプラグインまとめ
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
FlatなUIが美しいJSレスなUIライブラリ「TopCoat」:phpspot開発日誌
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」:phpspot開発日誌
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオート
Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」:phpspot開発日誌
Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 2013年03月28日- MagicSuggest Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 Bootstrapなサイトはどんどん増えている中、こうしたコンポーネントも増えていますが、これまた便利そうです。 文字入力でサジェストを提供するものはありきたりですが、最初からBootstrapテーマがかかっており、複数ワードの指定も可能です。 １つサジェストから選択した後に更にinputをすすめると更にサジェスト これからのプラグインはBootstrapテーマにも最初から対応していつつ、レスポンシブな物が沢山の人に使ってもらうには必要不可欠な気がします 関連エントリ UIがカッコいいオートコンプリート実装jQue
属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」:phpspot開発日誌
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」:phpspot開発日誌
Home | JavaScript UI - w2ui Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」。 グリッド、ツールバー、サイドバー、閉じれるタブ、フォームのウィジェットがBootstrapに追加できそう。 グリッド ツールバー サイドバー 閉じれるタブ フォーム IE8でサポート対象外なのに注意ですが、ますますBootstrapが強化されますね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコ
レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」:phpspot開発日誌
Pickadate.js レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 $('.datepicker').pickadate()、とするだけで次のような大きめの日付ピッカーを表示して日付を選択出来ます。 スマホ、タブレットも自動対応。デザイン的にBootstrapで使ってもいけそうですね これは１つで大体の端末に対応できそうで便利そうです。 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネン
Twitter製の高速なオートコンプリート用JSライブラリ「typeahead.js」:phpspot開発日誌
typeahead.js Twitter製の高速なオートコンプリート用JSライブラリ「typeahead.js」 ハードコードデータとリモートのデータを両方サジェストできたり、サジェスト部分のテンプレートをいじったりできるみたいです。 オートコンプリート用ライブラリは数あれど、Twitter社製ということで、一度試してみたいものですね Twitterが出すことによって成功したBootstrapですが、こうした高品質な物が使えてしまうのはありがたいことですね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wy
bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」
twitter facebook hatena google pocket システムなどでよく使うことがあるツールバーを、jQueryプラグインを使って簡単に導入しましょう。 Toolbar.js - jQuery plugin to create tooltip style toobarsは、クリックすると表示させられるツールチップタイプのツールバーが作れます。 sponsors 使用方法 Toolbar.js - jQuery plugin to create tooltip style toobarsからファイルをダウンロード。 <link href="jquery.toolbars.css" rel="stylesheet" /> <link href="bootstrap.icons.css" rel="stylesheet" /> <script type="text/java
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI - かちびと.net
Twitter BootstrapのCSSをオンラインで作成・「StyleBootstrap.info」 - かちびと.net
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました
Twitter Bootstrapから派生したWeb制作向けフレームワーク・Plusstrap - かちびと.net
