![](https://habrastorage.org/files/b0e/df7/aea/b0edf7aea47449d8b80fd71f52380abc.png)
Bootstrap CSSフレームワークの人気により、多くの異なるアドオンが開発されています。 今でも、Webサイトの開発と設計の際、ほとんどすべてのタスクにBootstrapを使用できます。
この記事では、「あらゆる場面で」最も役立つ追加機能を取り上げました。
コンポーネントキット
燃料UX
![1](https://habrastorage.org/getpro/habr/post_images/353/730/1a3/3537301a3d5c65b0a664dc5068d1ab02.png)
Bootstrapを使用する場合、多くの場合十分ではない優れた追加コントロールのセット。 ツリー、テンプレート、データパイカー、ウィザードなどのモジュールが含まれています。
ウェブサイト
Github
X編集可能
![2](https://habrastorage.org/getpro/habr/post_images/ae8/55c/8bb/ae855c8bbd285f5db89933ae665149bb.png)
これはインライン編集に不可欠なコンポーネントのセットだと思います。 Bootstrapのさまざまなバージョンをサポートし、それなしでも(jQueryで)正常に動作します。
ウェブサイト
Github
ジャスニー
![3](https://habrastorage.org/getpro/habr/post_images/a77/839/568/a77839568d1e11507a3403e2aaa131d8.png)
Bootstrapへの追加要素の小さなセット。 サイドメニュー、機能ボタン、入力用マスクなどの両方が含まれています。
ウェブサイト
Github
ブートストラップフォームヘルパー
![4](https://habrastorage.org/getpro/habr/post_images/248/3c3/a46/2483c3a46a482084666c0079efe5c760.png)
別の興味深い要素のセット。 プレミアムバージョンには、通貨、国、タイムゾーン、言語などを選択するための入力などの要素が含まれます。
ウェブサイト
Github
跳躍
![5](https://habrastorage.org/getpro/habr/post_images/bad/413/8aa/bad4138aa8809ddc60e19e18d4f1b9b2.png)
Leapstrapコントローラープラグインをサポートする要素のセット。 これは非常に珍しいことなので、このリストに含めています。
ウェブサイト
Github
個々のコンポーネント
jQuery Bootpag
![6](https://habrastorage.org/getpro/habr/post_images/6d1/ab6/72d/6d1ab672dfa4dee011de3e8728452d56.png)
標準のBootstrapバンドルに欠けていることが多い追加のコンポーネントは、ページネーションです。 機能は、動的処理の可能性です。
ウェブサイト
Github
する
![7](https://habrastorage.org/getpro/habr/post_images/2f2/d6a/457/2f2d6a457e8173a0671b78605300d20e.png)
ページコンテンツを追跡するためのコンポーネント。 多くの場合、この特定のコンポーネントでは、最新のWebサイトを作成するには不十分です。
ウェブサイト
Github
ブートストラップリンクのプレビュー
![8](https://habrastorage.org/getpro/habr/post_images/988/1e7/970/9881e79703a12be9854f5ce8167cd936.png)
参照によってコンテンツをプレビューするための小さくて非常に使いやすいコンポーネント(Facebookプレビューなど)。
ウェブサイト
Github
Flippant.js
![9](https://habrastorage.org/getpro/habr/post_images/b26/348/8c2/b263488c2645cc0af95d4f5edccf8509.png)
「双方向」ブロックを作成する小さなスクリプト。 フォーム、ポートフォリオカードなどの作成に最適
ウェブサイト
Github
ブートストラップツアー
![10](https://habrastorage.org/getpro/habr/post_images/08f/ddb/2eb/08fddb2ebdb2ed527d9b11a7f60e73ed.png)
Bootstrapの優れた追加機能。サイトへの新規訪問者向けの段階的なツアーを作成できます。
http://bootstraptour.com/
https://github.com/sorich87/bootstrap-tour
Bootstro.js
![o](https://habrastorage.org/getpro/habr/post_images/08b/330/70c/08b33070c374cefcb2ded7a3ea05741f.png)
前のツールの変形。 また、WebサイトまたはWebアプリケーションのターンベースのツアーを作成することも目的としています。
ウェブサイト
Github
もう一つのメガメニュー(YAMM)
![j](https://habrastorage.org/getpro/habr/post_images/557/24e/794/55724e794a4b344eff939858b07913f0.png)
ほぼすべての最新のサイトに必要なコンポーネント。 ほとんどすべての複雑なメインナビゲーションメニューを作成できます。
ウェブサイト
Github
ドロップダウンメニューの機能強化
![12](https://habrastorage.org/getpro/habr/post_images/c1b/df1/19d/c1bdf119dea80072c4689db77e985dc5.png)
標準のブートストラップメニューへの追加。 メニューの配置、メニューでのラジオおよびチェックボックス入力の表示などの機能が含まれます。
ウェブサイト
Github
ブートストラップツリービュー
![gg](https://habrastorage.org/getpro/habr/post_images/8dd/ff5/460/8ddff54608ad826649bd77497277659d.png)
ツリー構造を表示する簡単なソリューション。 このコンポーネントは、標準のGlyphアイコンをサポートしています。
Github
GTreeTable
![ll](https://habrastorage.org/getpro/habr/post_images/51a/0b2/adc/51a0b2adcb7c572ed9570859945525df.png)
ツリー構造を作成できる別の追加。 ドラッグアンドドロップ、編集などの豊富な機能を備えています。
ウェブサイト
Github
ブートストラップの星評価
![str](https://habrastorage.org/getpro/habr/post_images/b69/0a0/7c7/b690a07c7a3dcf98d2a2053022830dfb.png)
簡単にカスタマイズできる、簡単に評価を作成するためのコンポーネント。 経験から私は言うことができます:非常に頻繁にあなたは同様のコンポーネントを探す必要があります。
ウェブサイト
Github
Gridmanager.js
![;; k](https://habrastorage.org/getpro/habr/post_images/da1/4bc/f6a/da14bcf6a0bf7eaba6e3c00daa72ab57.png)
Bootstrapフレームワークの行と列に基づくコンテンツエディター。 私はまだそれを実践する方法を見つけていません。 実装の例としてもっと投稿しました。
ウェブサイト
Github
フォームのコンポーネント
ブートストラップタグ
![タグ](https://habrastorage.org/getpro/habr/post_images/704/ec6/4b6/704ec64b6b71c16c11d0d88e1aef991e.png)
タグ付けが簡単なコンポーネント。 非常に使いやすく、カスタマイズも簡単です。 Bootstrapのすべてのバージョンで動作します。
ウェブサイト
Github
ブートストラップスイッチ
![v3](https://habrastorage.org/getpro/habr/post_images/5c5/c73/90f/5c5c7390ff5fbff03039c5373226abde.png)
きちんとしたスイッチを作成するためのコンポーネント。 さらに、あらゆるウェブサイトのデザインに適しており、寸法、アニメーション、色など、すべてのパラメーターをここで簡単に構成できます。
ウェブサイト
Github
ブートストラップの最大長
![最大](https://habrastorage.org/getpro/habr/post_images/127/370/b6d/127370b6dc2fe79e6b327ad1e1b26594.png)
テキスト入力フィールドに適した「リミッター」。 使いやすく、時には不可欠な追加機能です。
ウェブサイト
Github
ブートストラップ選択
![sel](https://habrastorage.org/getpro/habr/post_images/f6c/7c0/dba/f6c7c0dba4a86cbe30845ae0796f8e7c.png)
通常のリストの機能を大幅に拡張できる非常に軽量なコンポーネント。 以下のリンクに従って、すべての使用例を参照してください。
ウェブサイト
Github
選ばれた
![チョス](https://habrastorage.org/getpro/habr/post_images/820/e6d/88f/820e6d88f9d8e82bfbdd0ecc825a4eed.png)
コンボボックスを大幅に改善する非常に単純なスクリプト。 このフィールドを使用するための多くのオプションとバリエーションをサポートしています。
ウェブサイト
Github
ブートストラップ複数選択
![マルチ](https://habrastorage.org/getpro/habr/post_images/727/5ea/be6/7275eabe669c728295dbb9326eef21fb.png)
リストボックスを展開する別のオプション。 このスクリプトは、開く/閉じる/選択するなどのイベントを処理します。クライアントが何を尋ねるかはわかりません...
ウェブサイト
Github
ブートストラップ検証
![バロディーター](https://habrastorage.org/getpro/habr/post_images/d9a/001/440/d9a001440809108d391a8bc0b8af43a6.png)
Bootstrapフレームワークでフォームを操作する際に不可欠なコンポーネント。 これにより多くの時間を節約できます。チェックに加えて、フォームフィールドの既製のデザインが含まれています。
ウェブサイト
Github
jqBootstrapValidation
![jqvalidator](https://habrastorage.org/getpro/habr/post_images/b67/d8e/0c0/b67d8e0c05d93b8ae7e1ffc43160152f.png)
Bootstrapフレームワークでフォームを検証するための別のコンポーネント(オプション)。 ユーザー入力の検証を作成するための多数のオプションが含まれています。
ウェブサイト
Github
jQueryファイルのアップロード
![jqfail](https://habrastorage.org/getpro/habr/post_images/ee9/c21/733/ee9c21733a38b6959fddbf731beedd40.png)
ファイルをダウンロードするためのフィールドを追加する必要がある場合に、時間を大幅に節約できる優れたコンポーネント。 多くのサーバープラットフォームをサポートしています。
Websit
Github
ブートストラップタグのオートコンプリート
![btag](https://habrastorage.org/getpro/habr/post_images/f92/df0/fc9/f92df0fc966f3630e9d60d09d73a8351.png)
簡単な自動補完のためのコンポーネント。 非常に使いやすく、軽量な(重量で)スクリプト。 ツールボックスに追加するに値すると思います。
ウェブサイト
Github
タグマネージャー
![タッグマン](https://habrastorage.org/getpro/habr/post_images/f6f/9e8/6d6/f6f9e86d677eb0305951a4862a93e737.png)
タグを作成するための準備完了スクリプト(コンポーネント)。 多くのオプションと、それに応じて、使用の可能性。
ウェブサイト
Github
先行入力
![タイプ](https://habrastorage.org/getpro/habr/post_images/54e/183/74a/54e18374a0a7c5cae1501c99509d91a5.png)
テキストボックスを備えた自動アドオンのコンポーネント。 2つのスクリプトが(検索および表示用に)使用されます。これらは一緒に使用することも個別に使用することもできます。
ウェブサイト
Github
ブートストラップ用スライダー
![スライダー](https://habrastorage.org/getpro/habr/post_images/3ff/04d/48e/3ff04d48ea7518c73e541409b18da9a4.png)
ユーザーが多くの時間を節約するのに役立つ別の要素。 データを手動で入力する代わりに、スライダーをドラッグするだけです。 完全に様式化された多くのオプション。
ウェブサイト
ブートストラップのトークンフィールド
![とけ](https://habrastorage.org/getpro/habr/post_images/965/c56/098/965c56098b815bb31de5bcf37debd2c5.png)
タグ付けが簡単なコンポーネント。 完全に様式化され、多くのオプションがあります。 キーボードおよびクリップボード入力をサポートします。
ウェブサイト
Github
所定のラベル
![ラベル](https://habrastorage.org/getpro/habr/post_images/533/b7e/e7f/533b7ee7fb2296857b980e68e68e3312.png)
ラベル要素と入力フィールドを組み合わせるという異常な効果を作成する軽量スクリプト。 多くのオプションがあります。 時にはそれが重宝することさえあります:)。
ウェブサイト
Github
強度計
![メーター](https://habrastorage.org/getpro/habr/post_images/3cf/5f9/813/3cf5f9813b7687689d3b013c9524e2ed.png)
入力されたパスワードの複雑さを判断するためのコンポーネント。 一般的な問題の簡単な解決策。 多くのオプションと既製のデザインが含まれています。
ウェブサイト
Github
ブートストラップファイル入力
![入力](https://habrastorage.org/getpro/habr/post_images/ed5/082/000/ed5082000c0864d94cbed3c2c22d429d.png)
ファイルをダウンロードするためのコンポーネント。 マルチブートおよびプレビューイラストをサポートします。 実装の例を参照するには、以下のリンクに従ってください。
ウェブサイト
Github
Bootstrap 3のLadda UI
![ラダ](https://habrastorage.org/getpro/habr/post_images/fc6/1c8/642/fc61c86427aa962c5fdb10918a35bfe1.png)
ローディングインジケータをボタンに直接使用するという非常に興味深いアイデアです。
ウェブサイト
Github
Twitter Bootstrapフレームワークには、本当に多くの追加機能があります。 記事を書いている間も、特定の状況で大いに役立つ興味深いアドオンを見つけ続けました。
日付と時刻のピッカー
日付範囲ピッカー
ウェブサイト
Github
ブートストラップタイムピッカー
ウェブサイト
Github
文字盤
ウェブサイト
Github
ブートストラップ日時
ウェブサイト
Github
ビックカレンダー
ウェブサイト
Github
カラーピッカー
色を選ぶ
ウェブサイト
Github
ブートストラップ用のColorpicker
ウェブサイト
Github
カラーパレット
ウェブサイト
Github
編集者
ブートストラップのマークダウン
ウェブサイト
Github
ブートストラップWYSIHTML5
ウェブサイト
Github
Summernote
ウェブサイト
Github
テーブル
テーブルクロス
ウェブサイト
Github
ブートストラップテーブル
ウェブサイト
Github
メディアとギャラリー
ブートストラップライトボックス
ウェブサイト
Github
ブートストラップ画像ギャラリー
ウェブサイト
Github
ブートストラップアイコンピッカー
ウェブサイト
Github
ダイアログと通知
Bootbox.js
ウェブサイト
Github
ブートストラップモーダル
ウェブサイト
Github
ブートストラップ通知
ウェブサイト
Github
ブートストラップの確認
ウェブサイト
Github
ブートストラップうなり声
ウェブサイト
Github
現時点では、これらのアドオンは、Bootstrapフレームワークを操作するのに最も役立つように思えました。 特定のプロジェクトの時間を大幅に節約するのに役立ちます。
あなたが私のコレクションを楽しんでくれたことを願っています。 他のアドオンを使用してこのリストに追加したい場合は、コメントで説明してください(ほとんどの読者にとっては)と思うかもしれません。
![](https://habrastorage.org/files/1dc/860/8a8/1dc8608a858e49009eb291b1f067eef7.jpg)
ドミトリー・カバコフ
Wordpress開発者