JavaScript
Ажывіце Bootstrap з дапамогай нашых дадатковых плагінаў JavaScript. Даведайцеся аб кожным плагіне, нашых параметрах даных і праграмнага API і многае іншае.
Індывідуальныя або складзеныя
Убудовы могуць быць уключаны паасобку (з выкарыстаннем Bootstrap's individual 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>
Несумяшчальныя плагіны
З-за абмежаванняў браўзера некаторыя з нашых убудоў, а менавіта ўбудовы Dropdown, Tooltip і Popover, нельга выкарыстоўваць у <script>
тэгу з module
тыпам, таму што яны залежаць ад Popper. Для атрымання дадатковай інфармацыі аб выпуску глядзіце тут .
Залежнасці
Некаторыя ўбудовы і кампаненты CSS залежаць ад іншых убудоў. Калі вы ўключаеце плагіны паасобку, пераканайцеся, што праверылі гэтыя залежнасці ў дакументах.
Нашы выпадаючыя спісы, усплывальныя вобразы і падказкі таксама залежаць ад Popper .
Усё яшчэ хочаце выкарыстоўваць 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()
функцыянальнасць. Гэта забяспечвае магчымасць спыніць выкананне дзеяння да яго пачатку. Вяртанне 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
Bootstrap выявіць jQuery, калі jQuery
ён прысутнічае ў window
аб'екце і не data-bs-no-jquery
ўсталяваны атрыбут <body>
. Калі jQuery знойдзены, Bootstrap будзе выдаваць падзеі дзякуючы сістэме падзей jQuery. Такім чынам, калі вы хочаце праслухоўваць падзеі Bootstrap, вам прыйдзецца выкарыстоўваць метады jQuery ( .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 селектары ў канструктарах
Вы таксама можаце выкарыстоўваць селектар 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 з іншымі структурамі карыстацкага інтэрфейсу. У такіх абставінах перыядычна могуць узнікаць сутыкненні прасторы імёнаў. Калі гэта адбудзецца, вы можаце выклікаць .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) вашым карыстальнікам, і/або дадайце свае ўласныя запасныя варыянты.
Бібліятэкі трэціх асоб
Bootstrap афіцыйна не падтрымлівае староннія бібліятэкі JavaScript, такія як Prototype або jQuery UI. Нягледзячы на .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)
}
})