Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

JavaScript

Mu Bootstrap wa si igbesi aye pẹlu awọn afikun JavaScript iyan wa. Kọ ẹkọ nipa itanna kọọkan, data wa ati awọn aṣayan API ti eto, ati diẹ sii.

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 afikun ti ko ni ibamu

Nitori awọn idiwọn aṣawakiri, diẹ ninu awọn afikun wa, eyun Dropdown, Tooltip ati awọn afikun Agbejade, ko le ṣee lo ni <script>tag pẹlu moduleiru nitori wọn dale lori Popper. Fun alaye siwaju sii nipa oro wo nibi .

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 yiyan

Lọwọlọwọ lati beere awọn eroja DOM a lo awọn ọna abinibi querySelectorati querySelectorAllfun awọn idi iṣẹ, nitorinaa o ni lati lo awọn yiyan to wulo . Ti o ba lo awọn yiyan pataki, fun apẹẹrẹ: collapse:Examplerii daju pe o sa fun wọn.

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
  }
})

jQuery iṣẹlẹ

Bootstrap yoo ṣe awari jQuery ti o ba jQuerywa ninu windowohun naa ko si si data-bs-no-jqueryẹda ti o ṣeto lori <body>. Ti a ba rii jQuery, Bootstrap yoo gbejade awọn iṣẹlẹ ọpẹ si eto iṣẹlẹ jQuery. Nitorina ti o ba fẹ tẹtisi awọn iṣẹlẹ Bootstrap, iwọ yoo ni lati lo awọn ọna jQuery ( .on, .one) dipo addEventListener.

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API ètò

Gbogbo awọn olupilẹṣẹ gba ohun awọn aṣayan yiyan 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.0.2"

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ẹ.

Awọn ile-ikawe ẹni-kẹta

Bootstrap ko ṣe atilẹyin fun awọn ile-ikawe JavaScript ẹni-kẹta gẹgẹbi Afọwọṣe tabi jQuery UI. Laibikita .noConflictati awọn iṣẹlẹ ti a fun lorukọ, awọn iṣoro ibamu le wa ti o nilo lati ṣatunṣe funrararẹ.

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)
  }
})