• 個別またはコンパイルされたファイルの読み込み
• data属性
• JavaScript用のAPI
• 衝突の回避
• イベント
• バージョン番号
• JavaScript無効化時に特別なフォールバックは提供しない
• サードパーティ・ライブラリ

個別またはコンパイルされたファイルの読み込み

プラグインはそれぞれ個別に読み込むことも(Bootstrapの個別の*.jsファイルを使用して)、 1つのファイルに全てを含めて読み込むことも(bootstrap.js、またはminifyされたbootstrap.min.jsを使用)可能です。

コンパイルされたJavaScriptを使用する場合
bootstrap.jsとbootstrap.min.jsの両方ともに、全てのプラグインが1つのファイルに含まれます。 どちらか一方のみを読み込むようにしてください。

プラグインの依存性
幾つかのプラグインとCSSの構成部品は、別のプラグインに依存します。 もし個別にプラグインを読み込むのであれば、これらの依存性を確認ようにしてください。 また、全てのプラグインはjQueryに依存することにも注意してください。 (これは、jQueryを全てのプラグインファイルの前に読み込まなければいけないことを意味します) サポートされるjQueryのバージョンを確認するには、 我々のbower.jsonを参照してください。

data属性

Bootstrapのプラグインは全て、純粋にマークアップのAPIを通すだけで、 JavaScriptを1行も書くこと無く使用することが可能になっています。 これはBootstrapのファーストクラスAPIであり、プラグインを使用する際に最初に考慮するべきものになります。

とは言うものの、ある状況ではこの機能をオフにすることが望ましいことがあるかもしれません。 そのため我々は、data-apiを使用して名前空間化されたdocument上の全てのイベントを、 data属性APIをアンバインドすることで無効化する機能を提供しています。 これは次のように使用します。

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

あるいは、特定のプラグインを対象にするには、 次のようにdata-apiの名前空間に沿ってプラグイン名だけを含めるようにします。

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

data属性を通して適用できるプラグインは1つだけ
同じ要素に対して複数のプラグインのdata属性を使用しないでください。 例えば、ボタンはツールチップとモーダルウインドウ表示の機能を両方持つことは出来ません。 これを実現したいのであれば、要素をラッピングしてください。

JavaScript用のAPI

我々はまた、あなたが全てのBootstrapプラグインを純粋なJavaScriptのAPIを通して使用できるべきであるとも考えています。 全ての公開APIは単一のチェーン可能なメソッドであり、その作用を受けるコレクションが返されます。

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

全てのメソッドは、任意のオプションのオブジェクト、特定のメソッドを示す文字列、 または何も指定無し(プラグインのデフォルトの挙動)を受け入れます。

$('#myModal').modal()                      // デフォルトで初期化
$('#myModal').modal({ keyboard: false })   // キーボード(ESC)操作無効で初期化
$('#myModal').modal('show')                // 初期化して即座に表示

また、各プラグインはConstructorのプロパティ$.fn.popover.Constructorを、 生のコンストラクタとして晒します。 もし、特定のプラグインのインスタンスを取得したいのであれば、 要素から$('[rel="popover"]').data('popover')として直接取得します。

デフォルト設定

プラグインのConstructor.DEFAULTSオブジェクトを変更することで、 プラグインのデフォルトの設定を変更することが可能です。

//modalプラグインのデフォルトの'keyboard'オプションをfalseに変更
$.fn.modal.Constructor.DEFAULTS.keyboard = false;

衝突の回避

時に、別のUIフレームワークと一緒にBootstrapプラグインを使用しなければいけないこともあるでしょう。 このような場合、名前空間の衝突が発生するかもしれません。 これが発生してしまった場合は、その評価をもとに戻したいプラグイン上で.noConflictを呼び出します。

// 値が割り当てられていた$.fn.buttonが返されます
var bootstrapButton = $.fn.button.noConflict();
// $().bootstrapBtnによって、Bootstrapの機能が提供されるようになります
$.fn.bootstrapBtn = bootstrapButton;

イベント

Bootstrapは、ほとんどのプラグインが持つ一意の動作のためのカスタムイベントを提供します。 一般的に、これらは不定詞と過去分詞の形式をとります。 不定詞(例えば、show)はイベントの開始時にトリガされ、 その過去分詞の形式(例えば、shown)は、動作完了時にトリガされます。

3.0.0では、Bootstrapの全てのイベントに名前空間が割り当てられています。

全ての不定詞イベントは、preventDefault機能を提供します。 これは、その動作が開始される前に、実行を停止する機能を提供することになります。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // モーダル表示をキャンセル
})

バージョン番号

Bootstrapの各jQueryプラグインのバージョンは、プラグインのコンストラクタのVERSIONを通して知ることができます。 例えば、ツールチップのプラグインであれば下記のようにします。

$.fn.tooltip.Constructor.VERSION // => "3.3.5"

JavaScript無効化時に特別なフォールバックは提供しない

BootstrapのプラグインはJavaScriptが無効化されている際に、上手にフォールバックするような機能を備えていません。 もし、このようなケースに対してユーザー体験を損なわないようにしたいのであれば、 <noscript>を使用して状況をユーザーに説明し(JavaScriptの有効化の方法も)、 必要であれば自身でフォールバックを実装してください。

サードパーティ・ライブラリ

Bootstrapは正式には、PrototypeやjQuery UIのようなサードパーティのJavaScriptライブラリをサポートしません。 そのため、.noConflictを使用し、イベントに名前空間を割り当てても、 あなた自身が修正する必要がある互換性の問題が発生するかもしれません。

 Back to top