JavaScript hmangin a rawn lang ang

Mimal emaw, khawlkhawm emaw a ni thei

Plugins chu pakhat zel hmangin (Bootstrap’s individual hmangin js/dist/*.js), emaw, vawi khatah hmang vek bootstrap.jsemaw, minified emaw hmangin bootstrap.min.js(a pahnih hian telh suh) dah theih a ni.

Bundler (Webpack, Rollup...) i hman chuan /js/dist/*.jsUMD ready file i hmang thei bawk.

Bootstrap chu module atan hman a ni

Bootstrap version kan pe a, chu chu ESM( bootstrap.esm.jsleh bootstrap.esm.min.js) anga siam a ni a, chu chuan Bootstrap chu i browser-ah module atan i hmang thei a, i target browser-te’n an support chuan

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

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

Innghahna te

Plugin leh CSS component thenkhat chu plugin dang a innghat a ni. Plugin te chu pakhat zel i dah tel a nih chuan docs ah hian heng dependencies te hi enfiah ngei ngei tur a ni.

Kan dropdowns, popovers leh tooltips te pawh Popper ah a innghat bawk .

jQuery hman i la duh em? A theih ang!

Bootstrap 5 hi jQuery tel lova hman theih tura siam a ni a, mahse jQuery hmang hian kan component te hi hman theih a la ni tho. Bootstrap hian object jQueryahwindow a detect chuan jQuery plugin system ah kan component zawng zawng a add vek ang; hei hian $('[data-bs-toggle="tooltip"]').tooltip()tooltips enable turin i ti thei dawn tihna a ni. Kan component dangte pawh chutiang bawk chu a ni.

Data attribute te hi a ni

Bootstrap plugin zawng zawng deuhthaw hi HTML hmang chauhvin data attribute (JavaScript functionality hman dan kan duh ber) hmangin enable leh configure theih a ni. Element pakhatah data attribute set khat chauh hmang ngei ang che (eg, button pakhat atang hian tooltip leh modal i trigger thei lo.)

Thil thlengte

Bootstrap hian plugin tam zawkte thiltih danglam bik atan custom event a pe a. A tlangpuiin, hengte hi infinitive leh past participle form-ah an lo kal a - chutah chuan showthilthleng pakhat tan tirh lamah infinitive (ex. ) chu a insiam a, a past participle form (ex. shown) chu thiltih zawh hunah a insiam a ni.

Infinitive event zawng zawng hian preventDefault()functionality an pe vek a. Hei hian action pakhat execution chu a tan hmaa tihtawp theihna a pe a ni. Event handler atanga false rawn thawn let pawhin automatic in a call ang 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...
})

Programmatic API hmanga siam a ni

Constructor zawng zawng hian optional options object emaw engmah an pawm lo (chu chuan plugin chu a default behavior nen a initiate a ni):

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

Plugin instance bik i hmuh duh chuan plugin tin hian getInstancemethod pakhat an expose vek a. Element atanga direct a lakchhuah theih nan hetiang hian ti ang che: bootstrap.Popover.getInstance(myPopoverEl).

Constructor hrang hrangah CSS selector te a awm

Plugin initialize nan DOM element aiah argument hmasa ber atan CSS selector i hmang thei bawk. Tunah hian querySelectorkan plugin te hian element pakhat chauh an support avangin plugin atana element chu method hmangin kan hmu a.

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

Asynchronous hnathawh leh inthlak danglamna te

Programmatic API method zawng zawng hi asynchronous a ni a , transition a tan veleh caller hnenah a kir leh a mahse a tawp hmain a kir leh thin .

Transition zawh veleh action execute tur chuan a inmil event chu i ngaithla thei ang.

var myCollapseEl = document.getElementById('myCollapse')

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

Chu bakah transitioning component a method call chu ngaihthah a ni ang .

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

Settings hmasa ber a ni

Plugin pakhat tana default settings chu plugin Constructor.Defaultobject chu siam danglamin i thlak thei ang:

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

Inhnialna a awm lo (jQuery i hman chauhvin)

A chang chuan Bootstrap plugins te hi UI framework dang nen hman a ngai thin. Hetiang dinhmunah hian namespace collision a awm fo thin. Chutiang a nih chuan i .noConflictvalue revert duh plugin chu i call thei ang.

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

Version number te pawh a awm

Bootstrap-a plugin pakhat zel version chu VERSIONplugin constructor property hmangin a lut thei a ni. Entirnan, tooltip plugin atan chuan:

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

JavaScript tihtawp a nih chuan special fallback a awm lo

Bootstrap-a plugins te hi JavaScript tihtawp a nih chuan a bik takin grace takin an tla leh lo. Hetiang a nih avang hian user experience i ngaih pawimawh a nih chuan, i user-te <noscript>hnena thil awmdan (leh JavaScript re-enable dan tur) hrilhfiah nan hmang la, leh/ emaw, nangmah ngeiin i custom fallback te pawh add rawh.

Sanitizer hman a ni

Tooltips leh Popovers te hian kan built-in sanitizer hmangin HTML pawmtu option te chu sanitize turin an hmang thin.

Default allowListvalue chu a hnuaia mi ang hian a ni:

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

He default ah hian value thar i dah duh chuan allowLista hnuaia mi ang hian i ti thei ang:

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)

Library bik hman i duh avangin kan sanitizer hi bypass i duh a nih chuan, entirnan DOMPurify , a hnuaia mi ang hian i ti tur a ni:

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