ブートストラップ-プラグインの概要

前の章の*レイアウトコンポーネント*で説明したコンポーネントはほんの始まりにすぎません。 Bootstrapには、機能を拡張する12個のjQueryプラグインがバンドルされており、サイトの対話を増やすことができます。 BootstrapのJavaScriptプラグインを使い始めるには、高度なJavaScript開発者である必要はありません。 Bootstrap Data APIを利用することにより、コードを1行も書かずにほとんどのプラグインをトリガーできます。

ブートストラッププラグインは、2つの形式でサイトに含めることができます-

個別-Bootstrapの個々の_ *。js_ファイルを使用します。一部のプラグインとCSSコンポーネントは他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。
または*コンパイル（一度にすべて）*-_bootstrap.js_または縮小された_bootstrap.min.js_を使用します。 _bootstrap.js_と_bootstrap.min.js_の両方にすべてのプラグインが1つのファイルに含まれているため、両方を含めないでください。

'_すべてのプラグインはjQueryに依存しています。そのため、プラグインファイルの前にjQueryを含める必要があります。 bower.jsonをチェックして、サポートされているjQueryのバージョンを確認してください。_

データ属性

すべてのBootstrapプラグインは、付属のData APIを使用してアクセスできます。したがって、プラグイン機能を呼び出すために1行のJavaScriptを含める必要はありません。
状況によっては、Data APIのこの機能をオフにすることが望ましい場合があります。あなたがデータAPIをオフにする必要がある場合は、JavaScriptの次の行を追加することにより、属性のバインドを解除することができます-

$(document).off('.data-api')

特定/単一のプラグインをオフにするには、このようなデータAPI名前空間とともに、名前空間としてプラグインの名前を含めるだけです-

$(document).off('.alert.data-api')

プログラマチックAPI

Bootstrapの開発者は、純粋にJavaScript APIを介してすべてのプラグインを使用できるはずだと考えています。すべてのパブリックAPIは、単一のチェーン可能なメソッドであり、たとえば、アクションのコレクションを返します-

$(".btn.danger").button("toggle").addClass("fat")

以下に示すように、すべてのメソッドは、オプションのオプションオブジェクト、特定のメソッドをターゲットとする文字列、または（デフォルトの動作でプラグインを開始する）何も受け入れません-

//initialized with defaults
$("#myModal").modal()

//initialized with no keyboard
$("#myModal").modal({ keyboard: false })

//initializes and invokes show immediately
$("#myModal").modal('show')

各プラグインは、 Constructor プロパティ（_ $。fn.popover.Constructor_）で生のコンストラクターも公開します。あなたが特定のプラグインインスタンスを取得したい場合は、要素から直接取得します-

$('[rel = popover]').data('popover').

対立なし

ブートストラッププラグインは、他のUIフレームワークで使用される場合があります。これらの状況では、ネームスペースの衝突が時折発生する可能性があります。この呼び出しを克服するには、値を元に戻したいプラグインで .noConflict を呼び出します。

//return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

//give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

イベント

ブートストラップは、ほとんどのプラグイン固有のアクションにカスタムイベントを提供します。一般的に、これらのイベントは2つの形式で来ます-

不定形-これはイベントの開始時にトリガーされます。 例えば。 show。不定詞イベントは、_preventDefault_機能を提供します。これにより、アクションの開始前にアクションの実行を停止することができます。

$('#myModal').on('show.bs.modal', function (e) {
  //stops modal from being shown
   if (!data) return e.preventDefault()
})

過去分詞形-これは、アクションの完了時にトリガーされます。 例えば。示されています。

Bootstrap-plugins-overview

目次

ブートストラップ-プラグインの概要

データ属性

プログラマチックAPI

対立なし

イベント