JavaScript

Mutum ko harhada

Ana iya haɗa plugins daban-daban (ta yin amfani da mutum ɗaya na Bootstrap js/dist/*.js), ko duka gaba ɗaya ta amfani da bootstrap.jsko rage bootstrap.min.js(kada ku haɗa duka biyun).

Idan kuna amfani da bundler (Webpack, Rollup…), zaku iya amfani da /js/dist/*.jsfayilolin da suke shirye UMD.

Amfani da Bootstrap azaman module

Muna ba da sigar Bootstrap da aka gina azaman ESM( bootstrap.esm.jsda bootstrap.esm.min.js) wanda ke ba ku damar amfani da Bootstrap azaman tsari a cikin burauzar ku, idan masu binciken ku da aka yi niyya suna goyan bayansa .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Dogara

Wasu plugins da abubuwan CSS sun dogara da wasu plugins. Idan kun haɗa plugins daban-daban, tabbatar da bincika waɗannan abubuwan dogaro a cikin takaddun.

Zazzagewar mu, popovers da tukwici na kayan aiki suma sun dogara da Popper .

Har yanzu kuna son amfani da jQuery? Yana yiwuwa!

An tsara Bootstrap 5 don amfani da shi ba tare da jQuery ba, amma har yanzu yana yiwuwa a yi amfani da kayan aikin mu tare da jQuery. Idan Bootstrap ya gano jQuerya cikin windowabu zai ƙara duk abubuwan da muka haɗa a cikin jQuery's plugin tsarin; wannan yana nufin za ku iya yi $('[data-bs-toggle="tooltip"]').tooltip()don kunna tukwici na kayan aiki. Haka yake ga sauran abubuwan da muka hada.

Bayanan bayanai

Kusan duk Bootstrap plugins ana iya kunna su kuma daidaita su ta hanyar HTML kadai tare da halayen bayanai (hanyar da muka fi so ta amfani da ayyukan JavaScript). Tabbatar yin amfani da saitin sifofi guda ɗaya kawai akan kashi ɗaya (misali, ba za ku iya jawo tip ɗin kayan aiki da modal daga maɓalli ɗaya ba).

Abubuwan da suka faru

Bootstrap yana ba da al'amuran al'ada don yawancin ayyuka na musamman na plugins. Gabaɗaya, waɗannan suna zuwa ne a cikin sigar ɓarna ta ƙarshe da ta gabata - inda ƙarshen (misali show) ke haifar da shi a farkon wani lamari, kuma sigar ɓangarorinsa na baya (misali shown) yana haifar da ƙarshen aikin.

Duk abubuwan da ba su da iyaka suna ba da preventDefault()ayyuka. Wannan yana ba da ikon dakatar da aiwatar da wani aiki kafin ya fara. Koma karya daga mai kula da taron shima zai kira ta atomatik 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 ɗin shirye-shirye

Duk masu ginin suna karɓar wani zaɓi na zaɓi ko ba komai (wanda ke fara plugin tare da dabi'un sa):

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

Idan kuna son samun misalin plugin ɗin, kowane plugin yana fallasa getInstancehanya. Domin dawo da shi kai tsaye daga wani kashi, yi wannan: bootstrap.Popover.getInstance(myPopoverEl).

Masu zaɓen CSS a cikin ginin gini

Hakanan zaka iya amfani da mai zaɓin CSS azaman mahawara ta farko maimakon wani abu na DOM don fara plugin ɗin. A halin yanzu ana samun kashi na plugin ta querySelectorhanyar tunda plugins ɗin mu suna goyan bayan kashi ɗaya kawai.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Ayyukan asynchronous da canji

Duk hanyoyin API na shirye-shirye ba su daidaita kuma suna komawa ga mai kira da zarar an fara canji amma kafin ya ƙare .

Domin aiwatar da wani aiki da zarar an kammala canji, zaku iya sauraron abin da ya faru.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Bugu da ƙari, za a yi watsi da kiran hanya a kan sashin canji .

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 !!

Saitunan tsoho

Kuna iya canza saitunan tsoho don plugin ta hanyar gyara abin plugin ɗin Constructor.Default:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Babu rikici (kawai idan kuna amfani da jQuery)

Wani lokaci yana da mahimmanci a yi amfani da plugins Bootstrap tare da wasu tsarin UI. A cikin waɗannan yanayi, karon sararin samaniya na iya faruwa lokaci-lokaci. Idan wannan ya faru, kuna iya kiran .noConflictplugin ɗin da kuke son mayar da darajar.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Lambobin sigar

Za'a iya samun damar sigar kowane plugins na Bootstrap ta hanyar VERSIONmallakar maginin plugin ɗin. Misali, don plugin ɗin kayan aiki:

bootstrap.Tooltip.VERSION // => "5.0.2"

Babu faɗuwa ta musamman lokacin da aka kashe JavaScript

Bootstrap's plugins ba sa komawa baya musamman cikin alheri lokacin da aka kashe JavaScript. Idan kuna kula da ƙwarewar mai amfani a wannan yanayin, yi amfani <noscript>da bayanin halin da ake ciki (da kuma yadda ake sake kunna JavaScript) ga masu amfani da ku, da/ko ƙara naku faɗuwar al'ada.

Sanitizer

Nasihun kayan aiki da Popovers suna amfani da ginanniyar sanitizer don tsabtace zaɓuɓɓukan da suka karɓi HTML.

Tsohuwar allowListƙimar ita ce mai zuwa:

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: []
}

Idan kuna son ƙara sabbin ƙima zuwa wannan tsoho allowListza ku iya yin masu zuwa:

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)

Idan kuna son ketare sanitizer ɗinmu saboda kun fi son amfani da ɗakin karatu da aka keɓe, misali DOMPurify , yakamata kuyi masu zuwa:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})