JavaScript
Bootstrap-ны безнең өстәмә JavaScript плагиннарыбыз белән тормышка ашырыгыз. Eachәр плагин, безнең мәгълүматлар һәм программатик API параметрлары һәм башкалар турында белү.
Индивидуаль яки тупланган
Плагиннар индивидуаль кертелергә мөмкин (Bootstrap индивидуаль кулланып js/dist/*.js
), яисә берьюлы куллану bootstrap.js
яки минимальләштерү bootstrap.min.js
(икесен дә кертмәгез).
Әгәр дә сез бәйләүче куллансагыз (Веб-пакет, 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>
Бер-берсенә туры килми торган плагиннар
Браузер чикләүләре аркасында, безнең кайбер плагиннар, ягъни Dropdown, Tooltip һәм Popover плагиннары, типтагы тэгта кулланып булмый, <script>
чөнки module
алар Попперга бәйле. Мәсьәлә турында тулырак мәгълүмат өчен монда карагыз .
Бәйләнешләр
Кайбер плагиннар һәм CSS компонентлары бүтән плагиннарга бәйле. Әгәр дә сез плагиннарны аерым кертсәгез, бу бәйләнешләрне документларда тикшерегез.
Безнең тамчылар, поповерлар һәм кораллар шулай ук Попперга бәйле .
Әле jQuery кулланырга телисезме? Бу мөмкин!
Bootstrap 5 jQueryсыз куллану өчен эшләнгән, ләкин jQuery белән безнең компонентларны куллану мөмкин. Әгәр Bootstrap объектта ачыкланса jQuery
,window
ул безнең барлык компонентларны jQuery плагин системасына өстәячәк; димәк, сез $('[data-bs-toggle="tooltip"]').tooltip()
корал киңәшләрен эшләтеп җибәрә аласыз. Бу безнең бүтән компонентлар өчен дә бар.
Мәгълүмат атрибутлары
Барлык Bootstrap плагиннары диярлек HTML аша мәгълүмат атрибутлары белән кушылырга һәм конфигурацияләнергә мөмкин (безнең JavaScript функциясен куллануның өстенлекле ысулы). Бер элементта бер генә мәгълүмат атрибутларын кулланырга онытмагыз (мәсәлән, сез бер үк төймәдән кораллар һәм модальне эшләтеп җибәрә алмыйсыз.)
Сайлаучылар
Хәзерге вакытта DOM элементларын сорау өчен без туган ысулларны кулланабыз querySelector
һәм querySelectorAll
эш сәбәпләре аркасында, сез дөрес селекторларны кулланырга тиеш . Махсус селекторларны куллансагыз, мәсәлән: collapse:Example
алардан качыгыз.
Вакыйгалар
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
}
})
jQuery вакыйгалары
Bootstrap jQuery-ны табачак, әгәр объектта булса һәм jQuery
атрибут куелмаган булса . JQuery табылса, Bootstrap jQuery вакыйгалар системасы ярдәмендә вакыйгалар чыгарачак. Шулай итеп, Bootstrap вакыйгаларын тыңларга теләсәгез, сезгә jQuery ысулларын ( , ) кулланырга туры киләчәк .window
data-bs-no-jquery
<body>
.on
.one
addEventListener
$('#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.0.2"
JavaScript сүндерелгәндә махсус кимчелекләр юк
JavaScript сүндерелгәндә Bootstrap плагиннары аеруча матур итеп кире кайтмыйлар. Әгәр дә сез бу очракта кулланучының тәҗрибәсе турында кайгыртасыз икән, кулланучыларга <noscript>
ситуацияне (һәм JavaScriptны ничек яңадан эшләтеп җибәрергә) аңлату өчен кулланыгыз, һәм / яки үзегезнең гадәттән тыш кимчелекләрегезне өстәгез.
Өченче як китапханәләре
Bootstrap рәсми рәвештә Прототип яки 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)
}
})