JavaScript

jQuery で構築された JavaScript プラグインを使って Bootstrap を実現しましょう。各プラグイン, データと API オプションなどについて学びます。

個別またはコンパイル

プラグインは(js/dist/*.js を使用して)個別に組み込むことも, bootstrap.js もしくはミニファイされた bootstrap.min.js のいずれかを一括して組み込みことができます。

バンドラ(Webpack, ROllup…)を使用する場合, UMD 対応の /js/dist/*.js を使用できます。

依存関係

いくつかのプラグインと CSS コンポーネントは他のプラグインに依存しています。プラグインを個別に組み込む場合は, ドキュメントで確認してください。また, 全てのプラグインが jQuery に依存していること に注意してください(プラグインの前に jQuery を読み込む必要があることに注意してください)。サポートされている jQuery のバージョンを確認するには package.json を参照してください。

ドロップダウン, ポップオーバ, ツールチップは Popper.js に依存しています。

データ属性

ほぼ全ての Bootstrap プラグインはデータ属性を持つ HTML だけ有効になり機能します。単一の要素に対して1セットのデータ属性のみを使用するようにしてください(例えば, 同じボタンからツールチップとモーダルを同時にトリガーすることはできません))。

ただし, この機能を使いたくないこともあるかもしれません。データ属性 API を無効化するには以下のように data-api をアンバインドします。

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

特定のプラグインだけ無効にする場合は, 次のようにプラグインの名前を含めます。

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

セレクタのエスケープ

イベント

Bootstrap は, ほとんどのプラグインに一意のアクションのカスタムイベントを提供します。 これらは, 不定期イベントとしてアクション開始時にトリガされ(例えば show), 完了時にもトリガされます(例えば shown)。 すべての不定期イベントは preventDefault() を提供します。 これにより, アクションが開始される前にその実行を停止することができます。 イベントハンドラから false を返すと preventDefault() も自動的に呼び出されます。

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

プログラム的な API

JavaScript API を通してすべての Bootstrap プラグインを使用できます。API は単一なメソッドチェーンで jQuery オブジェクトを返します。

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

すべてのメソッドはオプションオブジェクト, 特定のメソッドを指定する文字列, もしくは何も指定しないでください(標準動作になります)。

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

各プラグインは $.fn.popover.Constructor という Constructor プロパティを公開しています。特定のプラグインインスタンスは要素から直接取得します: $('[rel="popover"]').data('popover')

非同期関数とトランジション

すべてのプログラム API メソッドは 非同期 で, トランジションが開始されてから終了する前に呼び出し元に戻ります。

トランジションが完了したらアクションを実行するために, 対応するイベントをキャッチすることができます。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

さらに, トラジションコンポーネントの呼び出しは無視されます。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

標準の設定

プラグインの Constructor.Default オブジェクトを変更することで, デフォルト設定を変更できます:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

コンフリクト回避

他の UI フレームワークで Bootstrap プラグインを使うことがあります。 このような状況では, 名前空間のコンフリクトが起こることがあります。 この場合, 値を元に戻したいプラグインで .noConflict を呼び出すことができます。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

バージョン番号

Bootstrap の各 jQuery プラグインのバージョンには, コンストラクタの VERSION プロパティから参照できます。例えば, ツールチップの場合:

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

JavaScript 無効時のフォールバック

JavaScript が無効な状態に対して, Bootstrap プラグインはフォールバックを提供していません。ユーザエクスペリエンスを考慮する場合は <noscript> を使ってユーザに状況(および JavaScript を再び有効にする方法)を説明し, 独自のフォールバックを追加することができます。

ユーティリティ

すべての Bootstrap の JavaScript ファイルは util.js に依存しており, 他の JavaScript ファイルと一緒に含める必要があります。コンパイルされた(または縮小された) bootstrap.js を使用している場合は, すでに含まれているので気にする必要はありません。

util.js には, ユーティリティ機能と transitionEnd イベント用の基本ヘルパーと CSS トランジションエミュレータが含まれています。これは他のプラグインと CSS トランジションのサポートをチェックしたり, キャッチするために使用されます。