JavaScript

Hi munhu hi xiyexe kumbe leyi hlengeletiweke

Ti-plugin ti nga katsiwa hi toxe (hi ku tirhisa Bootstrap’s individual js/dist/*.js), kumbe hinkwaswo hi nkarhi wun’we hi ku tirhisa bootstrap.jskumbe leswi hungutiweke bootstrap.min.js(u nga katsi havumbirhi bya swona).

Loko u tirhisa bundler (Webpack, Rollup...), u nga tirhisa /js/dist/*.jstifayela leti nga UMD ready.

Ku tirhisa Bootstrap tanihi modula

Hi nyika vuhundzuluxeri bya Bootstrap lebyi akiweke tanihi ESM( bootstrap.esm.jsna bootstrap.esm.min.js) lebyi ku pfumelelaka ku tirhisa Bootstrap tanihi modyuli eka xihlamusela-marito xa wena, loko swihlamusela-marito swa wena leswi kongomisiweke swi swi seketela .

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

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

Swilo leswi titshegeke hi swona

Ti-plugin tin’wana ni swiphemu swa CSS swi titshege hi ti-plugin tin’wana. Loko u katsa ti-plugin hi toxe, tiyisisa leswaku u kambela ku titshega loku eka ti-docs.

Ti dropdowns ta hina, ti popovers na ti tooltips na tona ti titshege hi Popper .

Xana wa ha lava ku tirhisa jQuery? Swi nga koteka!

Bootstrap 5 yi endleriwe ku tirhisiwa handle ka jQuery, kambe swa ha koteka ku tirhisa swiphemu swa hina na jQuery. Loko Bootstrap yi kuma jQueryeka windownchumu wu ta engetela swiphemu swa hina hinkwaswo eka sisiteme ya plugin ya jQuery; leswi swi vula leswaku u ta kota ku endla $('[data-bs-toggle="tooltip"]').tooltip()ku endla leswaku switsundzuxo swa switirhisiwa swi tirha. Swi tano ni hi swiphemu swa hina leswin’wana.

Swihlawulekisi swa datha

Kwalomu ka ti-plugin hinkwato ta Bootstrap ti nga tirhisiwa no lulamisiwa hi ku tirhisa HTML ntsena hi swihlawulekisi swa data (ndlela ya hina leyi hi yi tsakelaka yo tirhisa ntirho wa JavaScript). Tiyisisa leswaku u tirhisa ntsena sete yin’we ya swihlawulekisi swa datha eka elemente yin’we (xikombiso, a wu nge pfuli xitsundzuxo xa xitirhisiwa na modal ku suka eka buti yin’we.)

Swiendlakalo

Bootstrap yi nyika swiendlakalo swa ntolovelo eka swiendlo swo hlawuleka swa ti-plugin to tala. Hi ntolovelo, leswi swi ta hi xivumbeko xa xiendliwa lexi nga heriki na xiendliwa lexi hundzeke - laha xiendliwa lexi nga heriki (ex. show) xi pfuriwaka eku sunguleni ka xiendlakalo, naswona xivumbeko xa xona xa xiendliwa lexi hundzeke (ex. shown) xi pfuriwa loko xiendlo xi hetisisiwa.

Swiendlakalo hinkwaswo leswi nga heriki swi nyika preventDefault()ntirho. Leswi swi nyika vuswikoti byo yimisa ku hetisisiwa ka xiendlo xi nga si sungula. Ku vuyisa mavunwa ku suka eka mufambisi wa xiendlakalo na swona swi ta vitana hi ku tisungulela 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 ya minongonoko

Vaaki hinkwavo va amukela nchumu wa swihlawulekisi swa ku hlawula kumbe ku nga ri nchumu (lexi sungulaka xiengetelo hi mahanyelo ya xona ya xiviri):

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

Loko u lava ku kuma xikombiso xo karhi xa xiengetelo, xiengetelo xin’wana ni xin’wana xi paluxa getInstancendlela yo karhi. Leswaku u yi vuyisa hi ku kongoma eka elemente yo karhi, endla leswi: bootstrap.Popover.getInstance(myPopoverEl).

Swihlawulekisi swa CSS eka swiaki

U nga ha tlhela u tirhisa xihlawulekisi xa CSS tanihi xivutiso xo sungula ematshan’weni ya xiaki xa DOM ku sungula xiengetelo. Sweswi elemente ya plugin yi kumeka hi querySelectorndlela tani hi leswi ti plugins ta hina ti seketelaka element yin’we ntsena.

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

Mintirho ya asynchronous na ku cinca

Maendlelo hinkwawo ya API ya phurogireme a ma asynchronous naswona ma tlhelela eka mufoyini loko ku cinca ku sungurile kambe ku nga si hela .

Leswaku u endla xiendlo loko ku cinca ku herile, u nga yingisela xiendlakalo lexi fambisanaka na xona.

var myCollapseEl = document.getElementById('myCollapse')

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

Ku engetela kwalaho ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

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

Switirhisiwa swa ntolovelo

U nga cinca swiletelo swa xiviri swa xiengetelo hi ku cinca Constructor.Defaultnchumu wa xiengetelo:

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

Ku hava ku lwisana (ntsena loko u tirhisa jQuery)

Minkarhi yin’wana swa laveka ku tirhisa ti-plugin ta Bootstrap ni swivumbeko swin’wana swa UI. Eka swiyimo leswi, ku tlumbana ka ndhawu ya mavito ku nga humelela nkarhi wun’wana. Loko leswi swi humelela, u nga ha vitana .noConflicteka plugin leyi u lavaka ku tlherisela nkoka wa yona.

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

Tinomboro ta vuhundzuluxeri

Vuhundzuluxi bya yin’wana na yin’wana ya ti-plugin ta Bootstrap byi nga nghenisiwa hi ku tirhisa VERSIONnhundzu ya muaki wa xiengetelo. Xikombiso, eka xiengetelo xa xitsundzuxo xa switirhisiwa:

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

Ku hava ti fallback to hlawuleka loko JavaScript yi nga tirhi

Ti-plugin ta Bootstrap a ti tlheleli endzhaku hi ndlela yo hlawuleka loko JavaScript yi nga tirhi. Loko u khathala hi ntokoto wa mutirhisi eka mhaka leyi, tirhisa <noscript>ku hlamusela xiyimo (na ndlela yo tlhela u pfumelela JavaScript) eka vatirhisi va wena, na/kumbe ku engetela ti-fallback ta wena ta ntolovelo.

Xihlantswi xo basisa

Tooltips na Popovers swi tirhisa sanitizer ya hina leyi akiweke ku sanitize swihlawulekisi leswi amukelaka HTML.

Nhlayo ya xiviri allowListhi leyi landzelaka:

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

Loko u lava ku engetela mimpimo leyintshwa eka default leyi allowListu nga endla leswi landzelaka:

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)

Loko u lava ku hundza eka sanitizer ya hina hikuva u tsakela ku tirhisa layiburari leyi tinyiketeleke, xikombiso DOMPurify , u fanele ku endla leswi landzelaka:

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