JavaScript

Жеке немесе құрастырылған

Плагиндерді жеке қосуға болады (Bootstrap's individual js/dist/*.js) немесе барлығын бірден bootstrap.jsнемесе кішірейтілген bootstrap.min.js(екеуін де қамтымайды).

Топтаманы (Webpack, Rollup…) пайдалансаңыз /js/dist/*.js, UMD дайын файлдарды пайдалануға болады.

Bootstrap модулін модуль ретінде пайдалану

Егер мақсатты браузерлер оны қолдаса , Bootstrap-ті браузеріңізде модуль ретінде пайдалануға мүмкіндік беретін ESM( bootstrap.esm.jsжәне ) түрінде жасалған Bootstrap нұсқасын ұсынамыз .bootstrap.esm.min.js

<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 селекторлары

Плагинді инициализациялау үшін 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 пайдалансаңыз)

Кейде басқа UI құрылымдарымен 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-ті қайта қосу жолын) түсіндіру үшін пайдаланыңыз және/немесе өзіңіздің реттелетін резервтеріңізді қосыңыз.

Санитизатор

Кеңестер мен 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)
  }
})