JavaScript

Инфиродӣ ё ҷамъоварӣ

Васлкунакҳо метавонанд ба таври инфиродӣ дохил карда шаванд (бо истифода аз 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>

Вобастагӣ

Баъзе плагинҳо ва ҷузъҳои CSS аз плагинҳои дигар вобастаанд. Агар шумо плагинҳоро ба таври инфиродӣ дохил кунед, боварӣ ҳосил кунед, ки ин вобастагиҳоро дар ҳуҷҷатҳо тафтиш кунед.

Намунаҳои афтанда, попопверҳо ва маслиҳатҳои мо низ аз Popper вобастаанд .

Ба ҳар ҳол мехоҳед 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 дар созандаҳо

Шумо инчунин метавонед интихобкунандаи 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.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)
  }
})