Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap トランジション効果プラグイン Bootstrap ウェブページの作成

Bootstrap プラグイン概要

に レイアウトコンポーネント 章で説明されているコンポーネントは始まりに過ぎません。Bootstrapには、 12 jQueryプラグインが機能を拡張し、サイトにさらなるインタラクティブ性を追加できます。JavaScript開発者でなくても、BootstrapのJavaScriptプラグインを学習することができます。BootstrapデータAPI（Bootstrap Data API）を使用すると、ほとんどのプラグインがコードを書かずに動作させることができます。

サイトがBootstrapプラグインを参照する方法は2種類あります：

単独で参照を使用してBootstrapの個別の *.js ファイルを使用してください。一部のプラグインやCSSコンポーネントは他のプラグインに依存しています。プラグインを単独で参照する場合は、これらのプラグイン間の依存関係を確認してください。
コンパイル（同時に）参照を使用して bootstrap.js または圧縮版の bootstrap.min.js。この2つのファイルを同時に参照しないでください、なぜなら bootstrap.js および bootstrap.min.js すべてのプラグインが含まれています。

すべてのプラグインが含まれています。プラグインファイルの前にjQueryを参照する必要があります。以下にアクセスしてください： bower.json Bootstrapが現在サポートしているjQueryのバージョンを確認してください。

data属性

data属性APIを通じて、すべてのBootstrapプラグインを使用できます。JavaScriptコードを一行も書かずに済みます。これはBootstrapの上位APIであり、あなたの第一選択肢でもあります。
それにしても、ある場合にはこの機能をオフにする必要があるかもしれません。したがって、data属性APIを解除して、この機能をオフにする方法も提供しています。 data-api ドキュメント上にバインドされたイベントの命名空間です。以下のように見えます：
```
$(document).off('.data}-api')
```
特定のプラグインを閉じるには、data-apiの名前空間にプラグインの名前を名前空間として追加することで、以下のようにします：
```
$(document).off('.alert.data-api')
```

プログラミングスタイルのAPI

私たちは、すべてのBootstrapプラグインに純粋なJavaScriptのAPIを提供しています。すべての公開APIは、単独または連鎖呼び出しをサポートし、操作する要素集合を返します（注：jQueryの呼び出し形式と同じです）。例えば：

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

すべてのメソッドは、オプションのオブジェクトをパラメータとして受け取り、または特定のメソッドを表す文字列、または何もパラメータを付けずに（その場合、プラグインをデフォルトの動作に初期化します）を受け取ることができます。以下のようになります：

//　初期化時にデフォルトの動作にします
$("#myModal").modal()　　　　
　//　初期化時にキーボードを無効にします　　　　　　　　　　　　　　　
$("#myModal").modal({　keyboard:　false　})　　
//　初期化し、すぐにshowを呼び出します
$("#myModal").modal('show')

各プラグインは、 Constructor 属性でも元のコンストラクタが公開されています：$.fn.popover.Constructor。特定のプラグインの例を取得したい場合は、直接ページ要素を通じて取得できます：

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

名前空間の衝突を避けるために

ある時は、Bootstrapプラグインが他のUIフレームワークと一緒に使用されることがあります。その場合、名前空間の衝突が発生する可能性があります。不幸にもそのような状況が発生した場合、プラグインの .noConflict メソッドはその元の値に復元されます。

//　$.fn.buttonが以前に持っていた値を返します
var　bootstrapButton　=　$.fn.button.noConflict()　
//　Bootstrap機能を$().bootstrapBtnに与えます　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn　=　bootstrapButton

イベント

Bootstrapは、多くのプラグインのユニークな動作にカスタムイベントを提供しています。一般的には、これらのイベントには2種類の形式があります：

動詞不定形：これがイベントの開始時にトリガーされます。例えば 例：show動詞不定形イベントは提供されています preventDefault 機能。これにより、イベントが開始される前に操作の実行を停止できます。
```
$('#myModal').on('show.bs.modal', function (e) {
//　モーダルの表示を阻止
　　if (!data) return e.preventDefault()　
)
```
過去形：アクションが実行された後にトリガーされます。例えば 例: 表示されるとき。

Bootstrap トランジション効果プラグイン Bootstrap ウェブページの作成