JavaScript

Olukuluku tabi akopọ

Awọn afikun le wa ni ẹyọkan (lilo Bootstrap's olukuluku js/dist/*.js), tabi gbogbo wọn ni ẹẹkan lilo bootstrap.jstabi miniified bootstrap.min.js(ko pẹlu mejeeji).

Ti o ba lo lapapo kan (Pack Web, Rollup…), o le lo /js/dist/*.jsawọn faili ti o ti ṣetan UMD.

Lilo Bootstrap bi module

A pese ẹya ti Bootstrap ti a ṣe bi ESM( bootstrap.esm.jsati bootstrap.esm.min.js) eyiti o fun ọ laaye lati lo Bootstrap gẹgẹbi module ninu ẹrọ aṣawakiri rẹ, ti awọn aṣawakiri rẹ ti o fojusi ṣe atilẹyin .

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

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

Awọn igbẹkẹle

Diẹ ninu awọn afikun ati awọn paati CSS dale lori awọn afikun miiran. Ti o ba pẹlu awọn afikun ni ẹyọkan, rii daju lati ṣayẹwo fun awọn igbẹkẹle wọnyi ninu awọn docs.

Awọn ifilọlẹ wa, popovers ati awọn imọran irinṣẹ tun dale lori Popper .

Ṣe o tun fẹ lati lo jQuery? O ṣee ṣe!

Bootstrap 5 jẹ apẹrẹ lati lo laisi jQuery, ṣugbọn o tun ṣee ṣe lati lo awọn paati wa pẹlu jQuery. Ti Bootstrap ba ṣe awari jQueryninu windowohun naa yoo ṣafikun gbogbo awọn paati wa ni eto itanna jQuery; eyi tumọ si pe iwọ yoo ni anfani lati ṣe $('[data-bs-toggle="tooltip"]').tooltip()lati mu awọn itọnisọna irinṣẹ ṣiṣẹ. Kanna n lọ fun wa miiran irinše.

Awọn eroja data

O fẹrẹ to gbogbo awọn afikun Bootstrap ni a le mu ṣiṣẹ ati tunto nipasẹ HTML nikan pẹlu awọn abuda data (ọna ti o fẹ wa ti lilo iṣẹ ṣiṣe JavaScript). Rii daju pe o lo eto kan ti awọn abuda data lori ẹyọkan (fun apẹẹrẹ, o ko le ṣe okunfa ohun elo irinṣẹ ati modal lati bọtini kanna.)

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ kan, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown) jẹ okunfa lori ipari iṣẹ kan.

Gbogbo awọn iṣẹlẹ ailopin pese preventDefault()iṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ. Pada eke pada lati ọdọ oluṣakoso iṣẹlẹ yoo tun pe laifọwọyi 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 ètò

Gbogbo awọn olupilẹṣẹ gba ohun awọn aṣayan iyan tabi nkankan (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

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

Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, ohun itanna kọọkan ṣafihan getInstanceọna kan. Lati le gba pada taara lati ẹya kan, ṣe eyi: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors ni constructors

O tun le lo oluyan CSS kan bi ariyanjiyan akọkọ dipo ipin DOM lati ṣe ipilẹṣẹ ohun itanna naa. Lọwọlọwọ eroja fun ohun itanna naa ni a rii nipasẹ querySelectorọna nitori awọn afikun wa ṣe atilẹyin ipin kan nikan.

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

Awọn iṣẹ asynchronous ati awọn iyipada

Gbogbo awọn ọna API ti eto jẹ asynchronous ati pada si olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari .

Lati le ṣe iṣe ni kete ti iyipada ba ti pari, o le tẹtisi iṣẹlẹ ti o baamu.

var myCollapseEl = document.getElementById('myCollapse')

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

Ni afikun ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

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

Awọn eto aiyipada

O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.Defaultnaa:

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

Ko si ija (nikan ti o ba lo jQuery)

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

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

Awọn nọmba ẹya

Ẹya ti ọkọọkan awọn afikun Bootstrap ni a le wọle nipasẹ VERSIONohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:

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

Ko si awọn ipadasẹhin pataki nigbati JavaScript jẹ alaabo

Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.

Sanitizer

Awọn imọran irinṣẹ ati Awọn agbejade lo imototo ti a ṣe sinu rẹ lati sọ awọn aṣayan di mimọ ti o gba HTML.

Iye aiyipada allowListni atẹle yii:

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

Ti o ba fẹ ṣafikun awọn iye tuntun si aiyipada yii allowListo le ṣe atẹle naa:

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)

Ti o ba fẹ lati fori imototo wa nitori pe o fẹ lati lo ile-ikawe iyasọtọ, fun apẹẹrẹ DOMPurify , o yẹ ki o ṣe atẹle naa:

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