JavaScript

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

このページでは

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

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

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

Bootstrap をモジュールとして使用する

ESM(bootstrap.esm.jsおよび)としてビルドされた Bootstrap のバージョンを提供します。これにより、対象となるブラウザーがサポートしているbootstrap.esm.min.js場合、ブラウザーで Bootstrap をモジュールとして使用できます。

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

互換性のないプラグイン

ブラウザーの制限により、一部のプラグイン (ドロップダウン、ツールチップ、ポップオーバープラグイン) は、Popper に依存しているため、typeの<script>タグでは使用できません。moduleこの問題の詳細については、こちらを参照してください。

依存関係

一部のプラグインおよび CSS コンポーネントは、他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。

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

それでも jQuery を使いたいですか? それが可能だ！

Bootstrap 5 は jQuery なしで使用するように設計されていますが、jQuery でコンポーネントを使用することも可能です。Bootstrap がオブジェクトを検出するjQueryと、windowすべてのコンポーネントが jQuery のプラグインシステムに追加されます。$('[data-bs-toggle="tooltip"]').tooltip()これは、ツールチップを有効にすることができることを意味します。同じことが他のコンポーネントにも当てはまります。

データ属性

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

セレクター

現在、DOM 要素のクエリにはネイティブメソッドを使用してquerySelectorおりquerySelectorAll、パフォーマンス上の理由から、有効なセレクターを使用する必要があります。たとえば、特別なセレクターを使用する場合は、collapse:Example必ずエスケープしてください。

イベント

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

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

var myModal = document.getElementById('myModal')

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

jQuery イベント

オブジェクトにがjQuery存在し、に属性が設定されていない場合、Bootstrap は jQuery を検出します。jQuery が見つかった場合、Bootstrap は jQuery のイベントシステムのおかげでイベントを発行します。したがって、Bootstrap のイベントをリッスンする場合は、の代わりにjQuery メソッド ( 、 ) を使用する必要があります。windowdata-bs-no-jquery<body>.on.oneaddEventListener

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

プログラム API

すべてのコンストラクターは、オプションのオプションオブジェクトを受け入れるか、何も受け入れません (デフォルトの動作でプラグインを開始します)。

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

特定のプラグインインスタンスを取得する場合は、各プラグインがgetInstanceメソッドを公開します。要素から直接取得するには、次のようにしますbootstrap.Popover.getInstance(myPopoverEl)。

コンストラクターの CSS セレクター

DOM 要素の代わりに CSS セレクターを最初の引数として使用して、プラグインを初期化することもできます。現在、プラグインはquerySelector単一の要素のみをサポートしているため、プラグインの要素はメソッドによって検出されます。

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

非同期関数と遷移

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

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

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

競合なし (jQuery を使用する場合のみ)

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

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

バージョン番号

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

bootstrap.Tooltip.VERSION // => "5.1.3"

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

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

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

Bootstrap は、Prototype や jQuery UI などのサードパーティの JavaScript ライブラリを公式にはサポートしていません。名前空間付きのイベントにもかかわらず.noConflict、独自に修正する必要がある互換性の問題がある場合があります。

消毒剤

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

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

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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: []
}

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

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})