JavaScript

jQuery 上に構築されたオプションの JavaScript プラグインを使用して、Bootstrap に命を吹き込みます。各プラグイン、データおよびプログラム API オプションなどについて学びます。

個別またはコンパイル済み

プラグインは (Bootstrap の individual を使用して) 個別に含めることも、または縮小版js/dist/*.jsを使用して一度に含めることもできます (両方を含めないでください)。bootstrap.jsbootstrap.min.js

バンドラー (Webpack、Rollup など) を使用/js/dist/*.jsすると、UMD 対応のファイルを使用できます。

依存関係

一部のプラグインおよび CSS コンポーネントは、他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。また、すべてのプラグインは jQuery に依存していることにも注意してください(つまり、プラグイン ファイルの前にjQuery を含める必要があります)。どのバージョンの jQuery がサポートされているかについては、当社までお問い合わせください。package.json

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

データ属性

ほぼすべての Bootstrap プラグインは、HTML だけでデータ属性を使用して有効化および構成できます (JavaScript 機能を使用する推奨方法)。1 つの要素で 1 セットのデータ属性のみを使用するようにしてください(たとえば、同じボタンからツールヒントとモーダルをトリガーすることはできません)。

ただし、状況によっては、この機能を無効にすることが望ましい場合があります。データ属性 API を無効にするには、ドキュメントの名前空間のすべてのイベントを次のdata-apiようにバインド解除します。

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

または、特定のプラグインをターゲットにするには、次のように data-api 名前空間とともにプラグインの名前を名前空間として含めます。

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

イベント

Bootstrap は、ほとんどのプラグイン固有のアクションに対してカスタム イベントを提供します。一般に、これらは不定詞と過去分詞形で提供されます。不定詞 (例: show) はイベントの開始時にトリガーされ、その過去分詞形 (例: shown) はアクションの完了時にトリガーされます。

すべての不定詞イベントはpreventDefault()機能を提供します。これにより、アクションの実行を開始前に停止することができます。イベント ハンドラから false を返すと、自動的に も呼び出されますpreventDefault()。

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

プログラム API

また、すべての Bootstrap プラグインを純粋に JavaScript API を介して使用できるべきだと考えています。すべてのパブリック API は単一の連鎖可能なメソッドであり、操作対象のコレクションを返します。

$('.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

各プラグインは、プロパティで生のコンストラクターも公開しConstructorます: $.fn.popover.Constructor. 特定のプラグイン インスタンスを取得する場合は、要素から直接取得します: $('[rel="popover"]').data('popover')。

非同期関数と遷移

すべてのプログラム API メソッドは非同期であり、遷移が開始されると終了する前に呼び出し元に戻ります。

遷移が完了したらアクションを実行するために、対応するイベントをリッスンできます。

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

さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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プラグインのオブジェクトを変更することで、プラグインのデフォルト設定を変更できます。

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

競合なし

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

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

バージョン番号

VERSIONBootstrap の各 jQuery プラグインのバージョンは、プラグインのコンストラクターのプロパティを介してアクセスできます。たとえば、ツールチップ プラグインの場合:

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

JavaScript が無効になっている場合、特別なフォールバックはありません

JavaScript が無効になっている場合、Bootstrap のプラグインは特に適切にフォールバックしません。この場合のユーザー エクスペリエンスが気になる場合は<noscript>、状況 (および JavaScript を再度有効にする方法) をユーザーに説明するために使用するか、独自のカスタム フォールバックを追加してください。

ユーティリティ

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

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

消毒剤

ツールチップとポップオーバーは、組み込みのサニタイザーを使用して、HTML を受け入れるオプションをサニタイズします。

デフォルトwhiteList値は次のとおりです。

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

このデフォルトに新しい値を追加する場合whiteListは、次の操作を実行できます。

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

DOMPurifyなどの専用ライブラリを使用するためにサニタイザーをバイパスする場合は、次の手順を実行する必要があります。

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})