JavaScript

Индивидуальное или скомпилированное

Плагины можно включать по отдельности (используя индивидуальные js/dist/*.js), или все сразу с помощью bootstrap.js или минифицированного bootstrap.min.js (не включайте оба).

Если вы используете сборщик (Webpack, Parcel, Vite…), вы можете использовать /js/dist/*.js файлы, которые готовы к UMD.

Использование с JavaScript-фреймворками

Хотя Bootstrap CSS можно использовать с любым фреймворком, Bootstrap JavaScript не полностью совместим с JavaScript-фреймворками, такими как React, Vue и Angular, которые предполагают полное знание DOM. Как Bootstrap, так и фреймворк могут пытаться изменить один и тот же элемент DOM, что приводит к ошибкам, таким как выпадающие списки, которые застревают в открытом состоянии.

Лучшая альтернатива для тех, кто использует такие фреймворки, — использовать пакет, специфичный для фреймворка, вместо Bootstrap JavaScript. Вот некоторые из самых популярных вариантов:

React: React Bootstrap
Попробуйте сами! Скачайте исходный код и рабочий демонстрационный пример использования Bootstrap с React, Next.js и React Bootstrap из репозитория twbs/examples. Вы также можете открыть пример в StackBlitz.
Vue: BootstrapVue (в настоящее время поддерживает только Vue 2 и Bootstrap 4)
Angular: ng-bootstrap

Использование Bootstrap как модуля

Попробуйте сами! Скачайте исходный код и рабочий демонстрационный пример использования Bootstrap в качестве модуля ES из репозитория twbs/examples. Вы также можете открыть пример в StackBlitz.

Мы предоставляем версию Bootstrap, созданную как ESM (bootstrap.esm.js и 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>

По сравнению со сборщиками JS, использование ESM в браузере требует использования полного пути и имени файла вместо имени модуля. Подробнее о JS-модулях в браузере. Вот почему мы используем 'bootstrap.esm.min.js' вместо 'bootstrap' выше. Однако это усложняется нашей зависимостью от Popper, которая импортирует Popper в наш JavaScript следующим образом:

import * as Popper from "@popperjs/core"

Если вы попробуете это как есть, вы увидите ошибку в консоли, похожую на следующую:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Чтобы исправить это, вы можете использовать importmap для разрешения произвольных имён модулей до полных путей. Если ваши целевые браузеры не поддерживают importmap, вам нужно использовать проект es-module-shims. Вот как это работает для Bootstrap и Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Зависимости

Некоторые плагины и CSS-компоненты зависят от других плагинов. Если вы включаете плагины по отдельности, убедитесь, что проверили эти зависимости в документации.

Наши выпадающие списки, всплывающие подсказки и подсказки также зависят от Popper.

Атрибуты данных

Практически все плагины Bootstrap можно включить и настроить с помощью одного HTML с помощью атрибутов данных (наш предпочтительный способ использования функциональности JavaScript). Убедитесь, что используется только один набор атрибутов данных на одном элементе (например, вы не можете запустить всплывающую подсказку и модальное окно с одной и той же кнопки).

Поскольку параметры можно передавать как через атрибуты данных, так и через JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Убедитесь, что вы измените регистр имени параметра с «camelCase» на «kebab-case», передавая параметры через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может хранить простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечное значение title будет 456, а отдельные атрибуты данных переопределят значения, заданные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации — это объединённый результат data-bs-config, data-bs- и js object, где последнее заданное значение ключа-значения переопределяет другие.

Селекторы

Мы используем собственные методы querySelector и querySelectorAll для запроса элементов DOM по соображениям производительности, поэтому вы должны использовать допустимые селекторы. Если вы используете специальные селекторы, такие как collapse:Example, убедитесь, что вы их экранируете.

События

Bootstrap предоставляет пользовательские события для большинства уникальных действий плагинов. Обычно они представляют собой инфинитив и причастие — где инфинитив (например, show) запускается в начале события, а его причастие (например, shown) запускается при завершении действия.

Все события в инфинитиве обеспечивают функциональность preventDefault(). Это позволяет остановить выполнение действия перед его началом. Возврат false из обработчика событий также автоматически вызовет preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  return event.preventDefault() // stops modal from being shown
})

Программный API

Все конструкторы принимают необязательный объект опций или ничего (что инициализирует плагин с его поведением по умолчанию):

const myModalEl = document.querySelector('#myModal')
const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Если вам нужно получить конкретный экземпляр плагина, каждый плагин предоставляет метод getInstance. Например, чтобы получить экземпляр напрямую из элемента:

bootstrap.Popover.getInstance(myPopoverEl)

Этот метод вернёт null если экземпляр не был инициирован над запрошенным элементом.

В качестве альтернативы, можно использовать getOrCreateInstance для получения экземпляра, связанного с элементом DOM, или создания нового в случае, если он не был инициирован.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

В случае, если экземпляр не был инициирован, он может принять и использовать необязательный объект конфигурации как второй аргумент.

CSS-селекторы в конструкторах

В дополнение к методам getInstance и getOrCreateInstance все конструкторы плагинов могут принимать элемент DOM или допустимый CSS-селектор в качестве первого аргумента. Элементы плагина находятся с помощью метода querySelector, поскольку наши плагины поддерживают только один элемент.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Асинхронные функции и переходы

Все методы программного API являются асинхронными и возвращаются вызывающей стороне после запуска перехода, но до его завершения. Чтобы выполнить действие после завершения перехода, вы можете прослушивать соответствующее событие.

const myCollapseEl = document.querySelector('#myCollapse')

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

Кроме того, вызов метода на компоненте, выполняющем переход, будет проигнорирован.

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose` метод

Хотя может показаться правильным использовать метод dispose сразу после hide(), это приведёт к неверным результатам. Вот пример проблемного использования:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Настройки по умолчанию

Вы можете изменить настройки по умолчанию для плагина, изменив объект Constructor.Default плагина:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Методы и свойства

Каждый плагин Bootstrap предоставляет следующие методы и статические свойства.

Метод	Описание
`dispose`	Уничтожает модальное окно элемента. (Удаляет сохранённые данные на элементе DOM)
`getInstance`	Статический метод, который позволяет получить экземпляр модального окна, связанный с элементом DOM.
`getOrCreateInstance`	Статический метод, который позволяет получить экземпляр модального окна, связанного с элементом DOM, или создать новый в случае, если он не был инициирован.

Статическое свойство	Описание
`NAME`	Возвращает имя плагина. (Пример: `bootstrap.Tooltip.NAME`)
`VERSION`	Версию каждого плагина Bootstrap можно получить через свойство `VERSION` конструктора плагина (Пример: `bootstrap.Tooltip.VERSION`)

Очиститель

Всплывающие подсказки и всплывающие окна используют наш встроенный очиститель для очистки параметров, которые принимают HTML.

Значение по умолчанию allowList имеет следующий вид:

js/src/util/sanitizer.js

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i

export const 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, вы можете сделать следующее:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Если вы хотите обойти наш очиститель, потому что предпочитаете использовать отдельную библиотеку, например DOMPurify, вы должны сделать следующее:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Использование jQuery (необязательно)

Вам не нужна jQuery в Bootstrap 5, но всё же можно использовать наши компоненты с jQuery. Если Bootstrap обнаружит jQuery в объекте window, он добавит все наши компоненты в систему плагинов jQuery. Это позволяет вам сделать следующее:

// to enable tooltips with the default configuration
$('[data-bs-toggle="tooltip"]').tooltip()

// to initialize tooltips with given configuration
$('[data-bs-toggle="tooltip"]').tooltip({
  boundary: 'clippingParents',
  customClass: 'myClass'
})

// to trigger the `show` method
$('#myTooltip').tooltip('show')

То же самое касается и наших других компонентов.

Отсутствие конфликтов

Иногда необходимо использовать плагины Bootstrap с другими фреймворками UI. В таких случаях могут возникать конфликты имён. Если это произойдёт, вы можете вызвать .noConflict для плагина, значение которого вы хотите восстановить.

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

Bootstrap официально не поддерживает сторонние JavaScript-библиотеки, такие как Prototype или jQuery UI. Несмотря на .noConflict и именованные события, могут возникнуть проблемы совместимости, которые вам нужно исправить самостоятельно.

События jQuery

Bootstrap обнаружит jQuery, если jQuery будет присутствовать в объекте window, и нет атрибута data-bs-no-jquery установленного на <body>. Если jQuery обнаружен, Bootstrap будет генерировать события благодаря системе событий jQuery. Поэтому, если вы хотите прослушивать события Bootstrap, вам придётся использовать методы jQuery (.on, .one) вместо addEventListener.

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

Отключенный JavaScript

Плагины Bootstrap не имеют специального резервного варианта при отключенном JavaScript. Если вам важен пользовательский опыт в этом случае, используйте <noscript>, чтобы объяснить ситуацию (и как снова включить JavaScript) вашим пользователям, и/или добавьте собственные пользовательские резервные варианты.

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/getting-started/javascript/