JavaScript

Индивидуаль яки тупланган

Плагиннар индивидуаль кертелергә мөмкин (Bootstrap индивидуаль кулланып js/dist/*.js), яисә берьюлы куллану bootstrap.jsяки минимальләштерү bootstrap.min.js(икесен дә кертмәгез).

Әгәр дә сез бәйләүче куллансагыз (Веб-пакет, Rollup…), сез /js/dist/*.jsUMD әзер файлларны куллана аласыз.

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 компонентлары бүтән плагиннарга бәйле. Әгәр дә сез плагиннарны аерым кертсәгез, бу бәйләнешләрне документларда тикшерегез.

Безнең тамчылар, поповерлар һәм кораллар шулай ук ​​Попперга бәйле .

Әле jQuery кулланырга телисезме? Бу мөмкин!

Bootstrap 5 jQueryсыз куллану өчен эшләнгән, ләкин jQuery белән безнең компонентларны куллану мөмкин. Әгәр Bootstrap объектта ачыкланса jQuery,window ул безнең барлык компонентларны jQuery плагин системасына өстәячәк; димәк, сез $('[data-bs-toggle="tooltip"]').tooltip()корал киңәшләрен эшләтеп җибәрә аласыз. Бу безнең бүтән компонентлар өчен дә бар.

Мәгълүмат атрибутлары

Барлык Bootstrap плагиннары диярлек HTML аша мәгълүмат атрибутлары белән кушылырга һәм конфигурацияләнергә мөмкин (безнең JavaScript функциясен куллануның өстенлекле ысулы). Бер элементта бер генә мәгълүмат атрибутларын кулланырга онытмагыз (мәсәлән, сез бер үк төймәдән кораллар һәм модальне эшләтеп җибәрә алмыйсыз.)

Вакыйгалар

Bootstrap күпчелек плагиннарның уникаль эшләре өчен махсус вакыйгалар тәкъдим итә. Гадәттә, алар инфинитив һәм үткән катнашу формасында килә - монда инфинитив (мәс. show) Вакыйга башланганда, һәм аның үткән катнашу формасы (мәс. shown) Акция тәмамлангач башлана.

Барлык инфинитив вакыйгалар да preventDefault()функциональлек бирә. Бу эш башланганчы туктатуны мөмкинлек бирә. Вакыйга эшкәртүчесеннән ялганны кире кайтару да автоматик рәвештә шалтыратыр 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 селекторлары

Сез шулай ук ​​плагинны башлау өчен 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 куллансагыз гына)

Кайвакыт 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.1.3"

JavaScript сүндерелгәндә махсус кимчелекләр юк

JavaScript сүндерелгәндә Bootstrap плагиннары аеруча матур итеп кире кайтмыйлар. Әгәр дә сез бу очракта кулланучының тәҗрибәсе турында кайгыртасыз икән, кулланучыларга <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)
  }
})