今すぐ押さえておきたい！Bootstrapで使えるプラグイン5選

Bootstrapで使えるプラグインサンプル5選

Bootstrapプラグインの導入方法

Bootstrapでプラグインを使う基本的な方法は、以下の通りになります。

1. プラグインのダウンロード
2. HTMLファイルにプラグイン専用のCSSファイルとJavaScriptファイルを読み込み
3. HTMLやCSS、JavaScriptをお好みのスタイルに合うように調整

基本的にはプラグインのwebサイトやGitHubにプラグインの設定方法、使い方が紹介されています。しかし、英語表記が多いことや設定していくコードもプログラミング初心者にとっては分かりにくいケースもよくあります。

以下に 5 つのプラグインを使用例含めてご紹介しますので、ご参考頂ければ幸いです。気になるプラグインがあれば、「プラグインの使用例」をクリックして、「ページのソースを表示」してコードを確認してみてください。

水平方向に写真スライドできるプラグイン

Horizontally Scrollable Image Carousel Plugin with jQuery

巻物風に写真を納めることができるカルーセル（回転）スタイルのフォト・ギャラリーのプラグインになります。ページのスペース的にコンテンツ掲載が難しい場合などに活用できそうです。画像一覧の下に表示されるスクロールバーを使って、画像移動をスムーズに行うことができます。 スライドの背景色などは、プラグインダウンロード後の css.css ファイル内の figcaption クラスで設定できます。

プラグインの使用例

手っ取り早くタイル・デザインを作れるプラグイン

jsTiles
Bootstrapv.3.3.5

Windows 8 に代表されるようなタイル・デザインを手っ取り早く取り入れることができるプラグインの jsTiles。各タイルのサイズやイメージも jstiles.js 内の tilesNum を編集することで簡単に変更できます。レスポンシブ・デザインにも対応し、タイルを敷き詰めたテンプレートも 1 枚だけでなく数枚用意できるなど充実の機能となっています。詳しくは jsTiles の公式ページを参照になってください。

プラグインの使用例

バー・アニメーションをマスターできるプラグイン

Bootstrap Slider Master
Bootstrapv3.2.0

web アプリケーションの開発には欠かせない「バー・アニメーション」を簡単に搭載できるプラグインになります。定番の水平方向をはじめ、垂直方向のバー・アニメーションにも対応しているので、シンプルな UI には十分役立つプラグインと思います。

プラグインの使用例

ドロワ―メニューのプラグイン

Bootstrap Offcanvas
Bootstrap v3 .3.4

Bootstrap にも充実したナビ・スタイルは用意されていますが、サイドからのドロワ―・メニューは Bootstrap Offcanvas プラグインを利用すると簡単にセットアップできます。カラーやドロワ―・スピードを変更して自分好みに使うことができます。

プラグインの使用例

”表”を機能的にするプラグイン

Bootstrap Table
Bootstrap v.2 or 3 中国人の文翼さんがリリースしているプラグインで、Bootstrap プラグインの中でも機能的な表ツールとなっています。表として必要なソート機能やレスポンシブ・デザイン機能、ページ送り機能、json ファイルでのデータ読み込みなど 15 種類の機能を備えています。Bootstrap のプラグインに慣れていない方でも、各機能のサンプルコードが紹介されていて、すぐにでも web 開発に使えるように工夫されています（サンプル・コード集）。まずはこちらの Bootstrap Table のサンプル・サイトをご覧になって、参考にしてみてください。

プラグインの使用例

まとめ

いかがでしたでしょうか？ちょっと試してみたいプラグインはありましたでしょうか？正直生粋のjQuery系プラグインに比べるとBootstrap対応プラグインは数が少ないですが、探せばいろいろと出てきます。またコーディングで困った時も参考になるようなサイトがありましたので、以下にご紹介させて頂きます。Bootstrapの開発現場でご活用頂ければ幸いです。

Bootstrapプラグイン紹介サイト

• jQueryScript.net
• jQueryPlugins
• jQueryRain

Bootstrapのコーディングに役立つサイト

• Bootsnipp
• Bootply
• designbootstrap