JavaScript
Бо плагинҳои ихтиёрии JavaScript-и мо Bootstrap-ро зинда кунед. Дар бораи ҳар як плагин, маълумот ва имконоти барномавии API ва ғайра маълумот гиред.
Инфиродӣ ё ҷамъоварӣ
Васлкунакҳо метавонанд ба таври инфиродӣ дохил карда шаванд (бо истифода аз 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>
Плагинҳои номувофиқ
Аз сабаби маҳдудиятҳои браузер, баъзе плагинҳои мо, аз ҷумла плагинҳои Dropdown, Tooltip ва Popover наметавонанд дар <script>
барчасп бо module
навъи истифода шаванд, зеро онҳо аз Поппер вобастаанд. Барои маълумоти бештар дар бораи ин масъала нигаред .
Вобастагӣ
Баъзе плагинҳо ва ҷузъҳои 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()
функсияро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед. Баргардонидани хато аз коркардкунандаи рӯйдод инчунин ба таври худкор занг мезанад 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-ро бо дигар чаҳорчӯбаҳои 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 ягон бозгашти махсус вуҷуд надорад
Васлкунакҳои Bootstrap ҳангоми хомӯш кардани JavaScript ба таври возеҳ намеафтанд. Агар шумо дар бораи таҷрибаи корбар дар ин ҳолат ғамхорӣ кунед, <noscript>
барои шарҳ додани вазъият (ва чӣ гуна JavaScript-ро аз нав фаъол кардан) ба корбарони худ истифода баред ва/ё нусхаҳои фармоишии худро илова кунед.
Китобхонаҳои тарафи сеюм
Bootstrap расман китобхонаҳои JavaScript-и тарафи сеюмро ба монанди Prototype ё jQuery UI дастгирӣ намекунад. Сарфи назар аз .noConflict
рӯйдодҳо ва фазои ном, метавонад мушкилоти мутобиқат дошта бошад, ки шумо бояд мустақилона ислоҳ кунед.
Санитизатор
Маслиҳатҳо ва Popovers безараргардонии дарунсохтаи моро барои безараргардонии имконоти қабулкардаи 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)
}
})