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



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

今時のWeb開発には欠かせない存在となっているBootstrapですが、プラグインを足すとさらに機能的になり、開発速度を加速してくれます。リリースされているプラグインの内容は様々で、ボタンやバーなどのパーツ系からデザイン全体に関わるようなダイナミック系までがあります。

そこで今回は、Bootstrap のプラグイン導入方法とサンプル・プラグインをご紹介し、Bootstrap のプラグインに触れていこうと思います。

目次
  1. Bootstrapで使えるプラグインサンプル5選
  2. Bootstrapプラグインの導入方法
  3. 水平方向に写真スライドできるプラグイン
  4. 手っ取り早くタイル・デザインを作れるプラグイン
  5. バー・アニメーションをマスターできるプラグイン
  6. ドロワ―メニューのプラグイン
  7. ”表”を機能的にするプラグイン
  8. まとめ

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

Bootstrapプラグインの導入方法

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

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

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

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

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

bootstrap-plugin-scrollableHorizontally Scrollable Image Carousel Plugin with jQuery

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

プラグインの使用例

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

jsTiles

jsTiles
Bootstrapv.3.3.5

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

プラグインの使用例

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

bootstrap- plugin-bar

Bootstrap Slider Master
Bootstrapv3.2.0

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

プラグインの使用例

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

Bootstrap Offcanvas
Bootstrap v3 .3.4

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

プラグインの使用例

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

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

プラグインの使用例

まとめ

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

Bootstrapプラグイン紹介サイト

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

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp