JavaScript

Индивидуално или съставено

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

Ако използвате пакет (Webpack, Rollup...), можете да използвате /js/dist/*.jsфайлове, които са готови за UMD.

Използване на Bootstrap като модул

Предоставяме версия на 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>

Зависимости

Някои добавки и CSS компоненти зависят от други добавки. Ако включвате плъгини поотделно, не забравяйте да проверите за тези зависимости в документите.

Нашите падащи менюта, изскачащи менюта и подсказки също зависят от Popper .

Все още искате да използвате jQuery? Възможно е!

Bootstrap 5 е проектиран да се използва без jQuery, но все пак е възможно да използвате нашите компоненти с jQuery. Ако Bootstrap открие jQueryв windowобекта , той ще добави всички наши компоненти в плъгин системата на jQuery; това означава, че ще можете да направите, $('[data-bs-toggle="tooltip"]').tooltip()за да активирате подсказки. Същото важи и за другите ни компоненти.

Атрибути на данните

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

събития

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
  }
})

$('#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 селектори в конструкторите

Можете също да използвате CSS селектор като първи аргумент вместо DOM елемент, за да инициализирате приставката. В момента елементът за приставката се намира чрез 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)

Понякога е необходимо да използвате плъгини Bootstrap с други UI рамки. При тези обстоятелства понякога могат да възникнат сблъсъци в пространството на имена. Ако това се случи, можете да извикате .noConflictприставката, на която искате да върнете стойността.

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

Номера на версиите

Версията на всеки от плъгините на Bootstrap може да бъде достъпна чрез VERSIONсвойството на конструктора на плъгина. Например за приставката за подсказки:

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

Няма специални резервни варианти, когато JavaScript е деактивиран

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

Дезинфектант

Подсказките и изскачащите екрани използват нашия вграден дезинфектант, за да дезинфекцират опции, които приемат 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)
  }
})